Search code examples
react-nativereact-native-stylesheet

React native size, does it scale automatically depending on the size of device?

I'm new to react native, and I have a question. Does react native scales the sizes of components depending on the device or what will be the best way to do it if it does not?

Solution

  • You can use some libs to help with this, like: react-native-responsive-fontsize

    Just config the width/height of your component with RFValue as:

    import { RFValue } from "react-native-responsive-fontsize"

export function Welcome(){
return (
    <View style={{width: RFValue(50)}}>
       <Text style={styles.welcome}>Hello</Text>    
    </View>
)}

const styles = StyleSheet.create({
      welcome: {
        fontSize: RFValue(24) 
        textAlign: "center",
        margin: RFValue(10),
      },
});

    You don't need to use this on every component or measure/size