Question 33023 in React native Question posted in
The official React Native documentation can be found here.

Dimesnion from React/native not working properly on Android device – React native

I am trying to create an Instagram like reel functionality in react-native app.
I want to display a video element on entire screen available space.
For the purpose of it I am using a FlatList.
This code doesn’t work on every device.

const HomeScreen = ({navigation}) => {
const dataArray=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];

const renderItem=({item,index})=>{
return(

    <View style={[{height:Dimesnions.get('window').height-bottomtabBarHeight,borderBottomColor:'black'},]}>
       <Text>{item}</Text>
      </View>
      
    
    )

}
return (

    <SafeAreaView style={styles.container}>
    <StatusBar />
    <FlatList 
    data={dataArray}
    renderItem={renderItem}
    pagingEnabled
    decelerationRate={'fast'}
    />

</SafeAreaView>

)
}

export default HomeScreen

const styles = StyleSheet.create({
container:{
flex:1,

}

})
Tags:

3

Answers


  1. 0

    work for me
    import dimansion from react native

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

const Myfun=()=>{
    return(
      <View style={{flex:1}}>
         <View style={{height:height}}></View>
     </View>
          )
                }
    Login or Signup to reply.
  2. 0

    actually what you need to do is make a state variable and assign dimension’s value in it and then in useEffect make a listener which would be triggered every time your device rotates or dimensions of device gets changed
    example below:

    const [dim, setDim] = useState(Dimensions.get('screen');
useEffect(() => {
const subscription = Dimensions.addEventListener(
  'change',
  ({ screen}) => {
    setDim({ screen});
  },
);
return () => subscription?.remove(); });

    you can use dim.height for height and dim.width for width in your desired component

    PS. I have made a complete and comprehensive tutorials regarding Dimensions API if you want to check it out then link is below(Tutorial is in Urdu/Hindi)
    https://www.youtube.com/watch?v=mISuyh_8-Cs&t=605s&ab_channel=LearnByDill

    Login or Signup to reply.
  3. 0

    I think it is because of typo which you used Dimesnions instead of Dimensions. You can get height or width of device as below:

    const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search