4

How react native Text and Image responsive?

I only know the Flexbox can make layout responsive but seems can not apply in text and image.

e.g.Make my text and image smaller in iphone 4s, bigger in iphone 6

Thanks.

kenny
  • 221
  • 2
  • 4
  • 13

3 Answers3

1

You can use Flexbox in order to make your application responsive.

For example, say you wanted to display a line of text and an image on the same line:

class ResponsiveExample extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>
                    Example of centered text
                </Text>
                <Image
                    resizeMode={"contain"}
                    style={styles.image}
                    source={{uri: "your image"}}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between"
    },
    text: {
        marginLeft: 20,
        flex: 1
    },
    image: {
        marginRight: 20,
        height: 400,
        flex: 3,
    }
});

Now the text and image will be displayed relative to the screen size. The usual hangup here is that flexDirection defaults to column, which will make things line up vertically. You can see what happens when we flip from portrait to landscape orientation:

enter image description here

As you can see, the text and image respond to the change in orientation.

For a better overview of Flexbox, I like to refer to the following guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Just keep in mind that React Native defaults to a flex-direction of column, so if you want things laid out horizontally, you'll have to explicitly set it to row.

Abdullah Bakhsh
  • 658
  • 1
  • 9
  • 15
  • Thanks for your detail tutorial but I want to know is that is there any way to make my text and images smaller when I am running iphone 4s, bigger in iphone 6 – kenny Jun 19 '16 at 17:41
  • I updated the example to show how you would change the image size based on the screen. Changing font size is going to require a little more engineering: http://stackoverflow.com/questions/32947036/how-to-set-font-size-for-different-ios-devices-in-react-native – Abdullah Bakhsh Jun 19 '16 at 17:50
  • Thanks a lot!!! It works! One more thing, in a page, I have too many text having too many font size. How can I apply responsive? Do you have any example? – kenny Jun 19 '16 at 17:56
  • No problem! If you need different font sizes depending on the screen then create a function that returns the right font size depending on the window's screen size (```require('Dimensions').get("window")```). React Native doesn't yet have percentage-based font calculations. However, there are strong indications that RN will add this functionality in future releases. – Abdullah Bakhsh Jun 19 '16 at 18:14
  • that means I need to calculate those sizes one by one? – kenny Jun 20 '16 at 03:49
  • Yes, for now. http://stackoverflow.com/questions/33628677/react-native-responsive-font-size – Abdullah Bakhsh Jun 20 '16 at 11:32
1

I think react-native-fit-image is useful for you.

React Native Fit Image enables you to draw responsive image component.

You can use this component as below.

<FitImage source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }} style={styles.fitImage} />

Originerd
  • 694
  • 1
  • 6
  • 12
0

You are right to think about Flexbox, simply wrap your Text and Image inside View and make those View flexbox responsive.

Jeremy Colin
  • 464
  • 2
  • 5