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

React native – Modal doesn't stay in the middle of the Screen

I’m new to React Native and trying to learn how to correctly position components amongst each other. Currently, I made a modal I was wanting for it to appear on top of whatever is in the background. If I take the view that makes the white box, it does appear in the middle.

My Screen I’m wanting to render everything:

        <View
            style={Styles.background}>

            <View
                style={{justifyContent:'flex-start', alignItems:'center'}}
            >
                <View
                    style={{
                        backgroundColor:Colors.gtechWhite,
                        width:'80%',
                        height:'25%'
                    }}
                >
                </View>

            </View>

            <View
                style={{flex:1, justifyContent:'center', alignItems:'center'}} >
                {addExerciseModalOpen && <AddExerciseModal setAddExerciseModalOpen={setAddExerciseModalOpen}/>}
            </View>
            <View style={{ position:'absolute', right:'6%', bottom:'14%', alignItems:'flex-end'}} >
                {filterModalOpen && <FilterModal selectedFilter={selectedFilter} setSelectedFilter={setSelectedFilter}  />}
            </View>
            <View style={{position:'absolute', right:'6%', bottom:'8%', alignItems:'flex-end', flexDirection:'row'}}>
                <Pressable
                    style={{paddingRight:35}}
                    onPress={()=>{
                        Haptics.notificationAsync(
                            Haptics.NotificationFeedbackType.Success
                        )
                        setAddExerciseModalOpen(false)
                        setFilterModalOpen(!filterModalOpen);
                    }}
                >
                    <Octicons name="filter"  size={40} color={Colors.darkMode.button} />
                </Pressable>
                <Pressable
                    onPress={()=>{
                        Haptics.notificationAsync(
                            Haptics.NotificationFeedbackType.Success
                        )
                        setFilterModalOpen(false)
                        setAddExerciseModalOpen(!addExerciseModalOpen);

                    }}
                >
                    <Ionicons name="add-circle-outline" size={40} color={Colors.darkMode.button}/>
                </Pressable>
            </View>
        </View>

The Component I’m wanting to render in the middle:

<View style={{
                flexDirection:'row',
                position: 'absolute',
                justifyContent: 'flex-start',
                alignItems: 'flex-start',
                width: '80%',
                height: '34%',
                borderRadius: 25,
                backgroundColor: Colors.darkMode.cards1,
                overflow: 'hidden' }}>
                <View style={{flex:1, top:10}}>
                    <View style={{ alignItems: 'center', paddingBottom:25}} >
                        <Text style={Styles.modalTitleText}>Add An Exercise</Text>

                        <TextInput
                            placeholder="Exercise Name"
                            placeholderTextColor="#ffffff"
                            style={{
                                color:'white',
                                fontFamily:'RobotoSlab-Bold',
                                fontSize:15,
                                marginLeft:25,
                                width:'90%',
                                marginTop:25,
                                height:45}}
                        />
                        <WhiteDivider dividerWidth={90} dividerMarginVertical={0}/>
                        <View style={{
                            flexDirection:'row',
                            flexGrow:1,
                            paddingTop:25,
                            marginRight:15,
                            marginLeft:15,
                        }}>
                            <ScrollView
                                style={{width:'100%'}}
                                horizontal={true}
                                showsHorizontalScrollIndicator={false}
                            >
                                {ExerciseCategories()}
                            </ScrollView>
                        </View>
                        <View style={{
                            flexDirection:'row',
                            flexGrow:1,
                            paddingTop:15,
                            marginRight:15,
                            marginLeft:15,
                        }}>
                            <Pressable
                                style={{alignItems:'center', backgroundColor:Colors.gtechWhiteTransparent, borderRadius:9, width:'95%', paddingVertical:4 }}
                                onPress={()=>setAddExerciseModalOpen(false)}
                            >
                                <Text style={{
                                    color: Colors.gtechGold,
                                    fontSize: 17,
                                    fontFamily: 'RobotoSlab-Medium'}}
                                >
                                    CANCEL
                                </Text>
                            </Pressable>
                        </View>
                        <View style={{
                            flexDirection:'row',
                            flexGrow:1,
                            paddingTop:15,
                            marginRight:15,
                            marginLeft:15,
                        }}>
                            <Pressable
                                style={{alignItems:'center', backgroundColor:Colors.gtechGoldTransparent, borderRadius:9, width:'95%', paddingVertical:4 }}
                                onPress={()=>setAddExerciseModalOpen(false)}
                            >
                                <Text style={{
                                    color: Colors.gtechGold,
                                    fontSize: 17,
                                    fontFamily: 'RobotoSlab-Medium'}}
                                >
                                    SAVE EXERCISE
                                </Text>
                            </Pressable>
                        </View>

                    </View>
                </View>
            </View>

enter image description here

Tags:

2

Answers


  1. 0

    By using this you can bring Modal to the center.

       style:{
    flex:1,
    justifyContent: 'center',
    alignItems: 'center'
  }

    Example:

    import React from "react";
import { View, Text, StyleSheet, Modal } from "react-native";

export default function App() {
  return (
      <Modal
        animationType={"slide"}
        transparent={true}
        visible={true}
        onRequestClose={this.closeModal}>
        <View style={styles.centered}>
          <View style={styles.childStyle}>
            <Text style={styles.title}>Center a View Component</Text>
            <Text style={styles.subtitle}>Using Flexbox</Text>
          </View>
        </View>
      </Modal>
  );
}

const styles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffc2c2",
  },
  title: {
    fontSize: 18,
    marginVertical: 2,
  },
  subtitle: {
    fontSize: 14,
    color: "#888",
  },
});
    Login or Signup to reply.
  2. 0

    There are two property that help to center, alignItem, justifyContent.

    For Modal, The First View after Modal tag act as a parent container (i.e. transparent). And the second View can be anything you want, (i.e. here it have backgroundColor: 'pink')

    import React from 'react';
import { View, Text,  Modal, StyleSheet } from 'react-native';

const App = () => {
  return (
    <Modal animationType={'slide'} transparent={true} visible={true}>
      <View style={styles.centered}>
        <View style={styles.childStyle}>
          <Text style={styles.title}>Center a View Component</Text>
          <Text style={styles.subtitle}>Using Flexbox</Text>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    marginVertical: 2,
  },
  subtitle: {
    fontSize: 14,
    color: '#888',
  },
  childStyle: {
    backgroundColor: 'pink',
    padding: '5%',
    borderRadius: 25,
  },
});

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search