Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can not seem to set height #79

Closed
ODelibalta opened this issue Oct 17, 2017 · 5 comments
Closed

Can not seem to set height #79

ODelibalta opened this issue Oct 17, 2017 · 5 comments
Labels

Comments

@ODelibalta
Copy link

Below is all my dependencies. What I am trying to do is have the modal as a module. This the main screen that imports the modal screen.

<Grid style={styles.container}>
        <Row>
          <TouchableOpacity 
            onPress={() => this.setState({showModal: !this.state.showModal})}
          >
            <Text>Open Modal here</Text>
          </TouchableOpacity>
          
          {this.state.showModal && 
            <EnterCodeModalScreen2 
              testProp='testProp'
            />
          }
   </Row>
</Grid>

This is the modal screen

<Modal isVisible={this.state.isModalVisible} style={styles.container} >
        <View style={{flex:1}}>
          <TextInput 
            editable = {true}
            keyboardType='number-pad'
            onChangeText={(code) => this.setState({code})}
            placeholder='Please enter your code'
            placeholderTextColor='#757575'
            autoFocus={true}
            autoCorrect={false}
          /> 
        </View>
</Modal>
.
.
.
const styles = StyleSheet.create({ 
  container: {
    width: 250, 
    height: 100,
    backgroundColor: '#FFF',
  }
});

Below is the end result. I've tried multiple height values. Width works. I've only looked at this on iOS.

screen shot 2017-10-17 at 6 10 27 pm

All my dependencies

"dependencies": {
    "axios": "^0.16.2",
    "date-fns": "^1.28.5",
    "lodash": "^4.17.4",
    "native-base": "^2.3.0",
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.4",
    "react-native-animatable": "^1.2.3",
    "react-native-camera": "^0.10.0",
    "react-native-credit-card-input": "^0.3.3",
    "react-native-easy-grid": "^0.1.15",
    "react-native-elements": "^0.16.0",
    "react-native-modal": "^4.1.0",
    "react-native-modal-datetime-picker": "^4.11.0",
    "react-native-navigation": "^1.1.143",
    "react-native-signature-capture": "^0.4.7",
    "react-native-vector-icons": "^4.2.0",
    "react-redux": "^5.0.5",
    "redux": "^3.7.2",
    "redux-persist": "^4.8.2",
    "redux-thunk": "^2.2.0"
  },
@mmazzarolo
Copy link
Member

Did you already try removing the flex: 1 from the content view?
Also, try passing flex: 0 to the modal style.

@ODelibalta
Copy link
Author

Setting the flex 0 on modal style resolved the issue. This ticket can be closed. Sorry for not labeling it right. Thank you for helping and your great libs (I am also using datetime picker :) )

@mmazzarolo
Copy link
Member

👍 no worries, have fun!

@dr1verrr
Copy link

dr1verrr commented Jul 8, 2023

Setting the flex 0 on modal style resolved the issue. This ticket can be closed. Sorry for not labeling it right. Thank you for helping and your great libs (I am also using datetime picker :) )

But it does not let you use avoidKeyboard properly

@dr1verrr
Copy link

dr1verrr commented Jul 8, 2023

Just set margin, padding to 0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants