Unable to align the content to the top of the screen-CodePudding

I'm writing a react native code where I'm trying to split the screen into 2. There are 3 tabs, and based on the tab I click, I need to display the content. Here My issue is, the content is getting displayed. But the content displayed is not from the top of the screen.

Here is my code.

import { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const App = () => {
  const [facetGroup, setFacetGroup] = useState([
    { name: 'tab 1', index: 1, description: 'tab one description' },
    { name: 'tab 2', index: 2, description: 'tab two description' },
    { name: 'tab 3', index: 3, description: 'tab three description' },
  ]);
  const [selectedIndex, setSelectedIndex] = useState(1);
  const handlePress = (index) => {
    setSelectedIndex(index);
  };
  return (
    <View style={styles.mainContainer}>
      <View style={{ flexDirection: 'col' }}>
        {facetGroup.map((item: any) => (
          <View key={item.index} style={styles.menuContainer}>
            <TouchableOpacity
              onPress={() => handlePress(item.index)}
              style={styles.title}>
              <Text>{item.name}</Text>
            </TouchableOpacity>
          </View>
        ))}
      </View>
      <View>
        {facetGroup.map((item: any) => (
          <View key={item.index} style={styles.descContainer}>
            <View style={{ marginLeft: 40 }}>
              {selectedIndex === item.index && <Text>{item.description}</Text>}
            </View>
          </View>
        ))}
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  mainContainer: { flex: 1, height: 500, flexDirection: 'row' },
  menuContainer: {
    backgroundColor: '#fff',
    textAlign: 'center',
    height: 40,
    border: '1px solid black',
    padding: 20,
  },
  descContainer: {
    backgroundColor: '#fff',
    height: 400,
    marginTop: 0,
    justifyContent: 'flex-start',
  },
});

And here is working fiddle. Please let me know how can I fix this.

Thanks

CodePudding user response：

It looks like the issue you're experiencing is that the content displayed in the second View is not starting from the top of the screen.

One possible solution to this issue is to add a flex: 1 style to the second View, which will cause it to take up all available space within its parent View. This will make the content start from the top of the screen.

Here's what the modified code would look like:

import { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const App = () => {
  const [facetGroup, setFacetGroup] = useState([
    { name: 'tab 1', index: 1, description: 'tab one description' },
    { name: 'tab 2', index: 2, description: 'tab two description' },
    { name: 'tab 3', index: 3, description: 'tab three description' },
  ]);
  const [selectedIndex, setSelectedIndex] = useState(1);
  const handlePress = (index) => {
    setSelectedIndex(index);
  };
  return (
    <View style={styles.mainContainer}>
      <View style={{ flexDirection: 'col' }}>
        {facetGroup.map((item: any) => (
          <View key={item.index} style={styles.menuContainer}>
            <TouchableOpacity
              onPress={() => handlePress(item.index)}
              style={styles.title}>
              <Text>{item.name}</Text>
            </TouchableOpacity>
          </View>
        ))}
      </View>
      <View style={{ flex: 1 }}>
        {facetGroup.map((item: any) => (
          <View key={item.index} style={styles.descContainer}>
            <View style={{ marginLeft: 40 }}>
              {selectedIndex === item.index && <Text>{item.description}</Text>}
            </View>
          </View>
        ))}
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  mainContainer: { flex: 1, height: 500, flexDirection: 'row' },
  menuContainer: {
    backgroundColor: '#fff',
    textAlign: 'center',
    height: 40,
    border: '1px solid black',
    padding: 20,
  },
  descContainer: {
    backgroundColor: '#fff',
    height: 400,
    marginTop: 0,
    justifyContent: 'flex-start',
  },

}); I hope this helps! Let me know if you have any other questions.