How react native Text and Image responsive? smaller text and image in small device, bigger text and image in large device

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:

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.