CODEWITHSUNDEEP
react-native
hesam sameni
hesam sameni

Reputation: 151

How can I use tabs in a modal in react-native

I have modal for filtering search resluts , something like foursquare app . I have filters in diffrent categories and I need to use tabs for each category . for example when user clicks each tabs it shows the filters related to that tab . and user can select checkboxes or radio buttons . and at the end when user checks all of their needed filters I need to make http request with the new filters.

Something like the image below . I created the modal but I need the functionality for tabs and at the end making the api request with the selected options:

enter image description here

Upvotes: 2

Views: 6524

Answers (2)

Junius L
Junius L

Reputation: 16132

You can also create custom tabs using <Text> with state and depending on a state value render a View associated with that tab. for example

state = {
  modalVisible: false,
  currentTab: 1,
};

onTabClick = (currentTab) => {
  this.setState({
    currentTab: currentTab,
  });
};

// inside render
<Modal
  animationType="slide"
  transparent={true}
  visible={this.state.modalVisible}
  onRequestClose={() => {
  Alert.alert('Modal has been closed.');
  }}>

<View style={styles.tabs}>
  <Text
    onPress={() => {
      this.onTabClick(1);
    }}
    style={[
      styles.tabTextStyle,
      this.state.currentTab === 1 ? styles.tabUnderline : null,
    ]}>
    GENDER
  </Text>
  ...
</View>

{this.state.currentTab === 1 && (
   <View>
     <Text>GENDER</Text>
   </View>
 )}
...

snack example

Upvotes: 2

TalESid
TalESid

Reputation: 2514

Modal is just a Container like View. You can draw anything inside it.

First, import {Modal} from 'react-native'
Then, in your modal, embed anything what you want:

<Modal visible={ this.state.modal }
animationType="fade" transparent={true}
onRequestClose={_ => this.setState({ modal: false }) }>
    <View>
        {/* 
            Do anything. Its an open ground.
            Whatever component, styles, props and/or anything else you want, you can design
        */}

        {/* For example, I am adding a close button */}
        <TouchableOpacity style={{ alignSelf: 'flex-end' }} onPress={_ => this.setState({ modal: false }) }>
            <Icon type="FontAwesome" name='times' style={ styles.closeIcon } />
        </TouchableOpacity>
    </View>
</Modal>

And you can open your modal from anywhere like:

<TouchableOpacity style={ styles.button } onPress={_ => this.setState({ modal: true }) }>
    <Text style={ styles.buttonText }>Open Modal</Text>
</TouchableOpacity>

Finally, for tabs, you can use either of:
NativeBase Tab Component
React Native Tab View

Upvotes: 0

Related Questions