在 React Native 中查看以适应屏幕

Question

Hello there guys

i have a problem with CSS in react native, i want to fit all my components in the screen without ScrollView but i cant seem to figure out what is my problem(i tried to change values for margins or paddings but it will look different in every device.)

As you can see at the attached image:

As you can see the graph below is not in the screen, i need to scroll view to the graph(which i dont want)

here is the code + css : ( I dropped some lines to shorten the code(Like the carousel components and etc)

 <View style={{ backgroundColor: "#fff" , flex: 1 }}>
  <LinearGradient
    colors={["#4c669f", "#3b5998", "#192f6a"]}
    start={[0, 0]}
    end={[1, 0]}
  >
    <View style={{ marginHorizontal: 20, paddingVertical: 48 }}>
      <View style={styles.imageContainer}>
        <View>
          <View style={styles.check}>
            <Ionicons name="md-checkmark" size={20} color={colors.pink} />
          </View>

          <Image
            source={require("../assets/profile-pic.jpeg")}
            style={{
              width: 100,
              height: 100,
              borderRadius: 32,
            }}
          />
        </View>
      </View>

      <View style={[styles.center, { marginVertical: 12 }]}>
        <Text style={styles.title}>
          {currentUser.name + " " + currentUser.lastName}
        </Text>
        <Text style={[styles.subTitle, { marginTop: 8 }]}>
          {businessDetails.bussinesName}
        </Text>
      </View>
    </View>
  </LinearGradient>
  <View style={styles.container}>
    <View style={styles.statContainer}>
      <Text style={styles.statNumber}>1,700₪</Text>
      <Text style={styles.stat}>הכנסה חודשית תופיע כאן</Text>
    </View>
  </View>
  <View style={styles.center}>
    <Text style={styles.textGraphTitle}>Graphs Analysis:</Text>
  </View>
  <View>
  </View>
</View>

);

CSS:

     center: {
    alignItems: "center",
    justifyContent: "center",
  },
  imageContainer: {
    alignItems: "center",
    justifyContent: "center",
    marginTop: 1,
    shadowColor: colors.darkBg,
    shadowOffset: { height: 3, width: 1 },
    shadowOpacity: 0.5,
  },
  container: {
    paddingVertical: 24,
    paddingHorizontal: 32,
    marginBottom: 8,
    backgroundColor: colors.lightBg,
    flexDirection: "row",
    justifyContent: "space-between",
    marginHorizontal: 16,
    borderRadius: 16,
    marginTop: -48,
  },
  statContainer: {
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
  },

Answer 1

You are asking responsive app design. Basically, you can use for width and height percentages or dimension.

import { Dimensions} from 'react-native' 

const {width, height} = Dimensions.get('window')

One more approach is to use react-native-screens library