View to fit the screen in 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,
  },

You may need to utilize min height / width. https://stackoverflow.com/questions/38382734/flex-items-not-shrinking-when-window-gets-smaller — The Fool, Sep 06 '20 at 07:51
@TheFool , as you suggested i did try, but no outcome i added the following values to the parent view — , Sep 06 '20 at 07:55
yeah my bad, you just saw you dont want nay scroll at all. min width / height will only help you to get proper scrolliing. So that is not the solution. The thing is with flex, it doesnt restrict their max size. — The Fool, Sep 06 '20 at 07:58
Your problem is also that you need to scale the content down. Making the container smaller will not really help with that. It's a good question. Nice problem. Maybe try asking it again / editing the question, separate from React Native. A pure CSS question. — The Fool, Sep 06 '20 at 08:01
https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ — The Fool, Sep 06 '20 at 08:04
Well thats a very weird one, when i try a simple page(you know few buttons and etc) its fitting, but when i try to do this more complex it doesnt work — , Sep 06 '20 at 08:04
because the buttons are not too big for the page yet. But at some point the button cannot fit on the page anymore, that is when you need to scale the content down, if you dont want to scroll. — The Fool, Sep 06 '20 at 08:05

score 0 · Accepted Answer · answered Sep 06 '20 at 11:47

0

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

answered Sep 06 '20 at 11:47

Jasur Kurbanov

80
6

I Do have this Dimensions, i will implement the use of them. thanks – Sep 06 '20 at 12:13

View to fit the screen in React Native

1 Answers1