height style doesn't work & want to change the bgcolor of the statusbar

Question

I'm new to App Development using React Native with Expo.

I've been working on a screen like the first image I attached below.

There is a Material Top Tab right under the status bar, and the gray buttons below are in the component of the tab screen.

The outer View tag has flex: 1 style to fill the screen with white background.

There is a ScrollView tag in the View tag, and I've set its height to 60. However, it 's stretched to certain height like in the first image below.

If I remove the flex:1 style from View tag, the height style works properly, but bg color of the bottom of the screen becomes gray not white.

How should I style these to become like the second image? Below is the code for the component.

const BoatListScreen = ({ navigation, route }) => {
  const { region } = route.params;
  const [selectedRegion, setSelectedRegion] = useState(
    RegionAreaNames[region][0]
  );
  const [data, setData] = useState(DUMMY_DATA);

  useEffect(() => {
    if (region) {
      setData(DUMMY_DATA.filter((item) => item.region === selectedRegion));
    }
  }, [region, selectedRegion]);

  return (
    <View style={{ backgroundColor: WHITE }}>
      {region && (
        <ScrollView
          horizontal
          style={styles.areaTagContainer}
          showsHorizontalScrollIndicator={false}
        >
          {RegionAreaNames[region].map((area, index) => (
            <Pressable
              key={index}
              style={[
                styles.areaButton,
                {
                  backgroundColor:
                    selectedRegion === area ? PRIMARY.DARK : GRAY.LIGHT,
                },
              ]}
              onPress={() => setSelectedRegion(area)}
            >
              <Text
                style={[
                  {
                    color: selectedRegion === area ? WHITE : BLACK,
                    fontWeight: selectedRegion === area ? 'bold' : 'normal',
                  },
                ]}
              >
                {area}
              </Text>
            </Pressable>
          ))}
        </ScrollView>
      )}

      <FlatList
        data={data}
        renderItem={({ item }) => (
          <Pressable>
            <BoatCard item={item} />
          </Pressable>
        )}
        keyExtractor={(item) => item.id}
        style={{ padding: 20 }}
        contentContainerStyle={{
          flexGrow: 1,
          paddingBottom: 100,
        }}
      />
    </View>
  );
};

BoatListScreen.propTypes = {
  navigation: PropTypes.object,
  route: PropTypes.object,
};

const styles = StyleSheet.create({
  areaTagContainer: {
    height: 60,
    flexDirection: 'row',
    marginTop: 5,
    paddingVertical: 10,
    paddingHorizontal: 20,
  },
  areaButton: {
    backgroundColor: GRAY.LIGHT,
    paddingVertical: 10,
    paddingHorizontal: 25,
    borderRadius: 20,
    marginRight: 10,
    justifyContent: 'center',
  },
});

Also, I want to set the bg color of the status bar(expo-status-bar) to white.. I've tried backgroundColor option, but it seems like it only works on Android. How can I change the bg color on iOS?

Answer 1

Can you try wrapping your ScrollView with additional View.In some cases scroll components try to grow its style because of implementation.