Untitled

  <Modal
                transparent={true}
                visible={modal}
            >
               
                 <View style={{flex:1}}>
                     <View style={{height:200,borderTopRightRadius:15,borderTopLeftRadius:15,bottom:0,position:'absolute',width:'100%',alignItems:"center",justifyContent:"center",backgroundColor:"#FFF"}}>
                       <View style={{flexDirection:"row"}}>
                            <View style={{width:50,height:50,backgroundColor:"red"}}>
                                <TouchableOpacity
                                    onPress={()=>{
                                        if(counter < 10){
                                        setCounter(counter+1)
                                        }
                                    }}
                                    style={{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"}}
                                >
                                    <Text>+</Text>
                                </TouchableOpacity>
                            </View>
                            <View style={{width:80,height:50,alignItems:'center',justifyContent:'center'}}>
                                <Text>{counter}</Text>
                            </View>
                            <View style={{width:50,height:50,backgroundColor:"yellow"}}>
                                <TouchableOpacity
                                    onPress={()=>{
                                        if(counter >= 2){
                                        setCounter(counter-1)
                                        }
                                    }}
                                    style={{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"}}
                                >
                                    <Text>-</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={{flexDirection:"row",height:40,marginTop:15,width:'100%',alignItems:'center',justifyContent:'space-around'}}>
                        <TouchableOpacity
                            style={{width:"40%",alignItems:"center",height:"100%",borderRadius:10,justifyContent:"center",backgroundColor:'blue'}}
                            onPress={()=>{
                                
                        }}>
                            <Text style={{color:"#FFF"}}>OK</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={{width:"40%",alignItems:"center",height:"100%",borderRadius:10,justifyContent:"center",backgroundColor:'blue'}}
                            onPress={()=>{
                                
                        }}>
                            <Text style={{color:"#FFF"}}>Cancel</Text>
                        </TouchableOpacity>
                                  
                        </View>
                    </View>
                </View> 
            </Modal>