CODEWITHSUNDEEP
reactjsreact-native
Fran
Fran

Reputation: 203

Hard to select TextInput entry in Android

I don't know why its so hard to select the input in Android, I keep pressing the TextInput but the Select all, paste or copy option is not showing up whether the input is empty or not. In iOS it is working perfectly!

<View style={styles.reporterView}>
    <Text style={styles.reporterText}>Reporter:</Text>
       <TextInput
           value={this.state.reporter}
           onChangeText={(reporter) => this.setState({reporter})}
           style={styles.reporterField}
           placeholder={'Name'}
           autoCorrect={false}
           textAlign={'left'}
           maxLength={20}
           scrollEnabled={false}
       />
</View>

  reporterView: {
    flex: 1, 
    flexDirection: 'row', 
    marginBottom: 25, 
    paddingTop: 15,
    paddingLeft: '22%'
  },
  reporterField: {
    flex: 1,
    fontSize: 22, 
    height: 55, 
    marginLeft: 30,
    marginTop: Platform.OS == 'android' ? -12 : 0
  }

Upvotes: 0

Views: 369

Answers (1)

mw509
mw509

Reputation: 2093

This looks like a common issue with React-Native and Android. I found a solution from the support pages that seems to work quite well.

removeClippedSubviews is set as true by default. so you have to set this to false

These are possible paths to find this and set to false;

..\node_modules\react-navigation-material-bottom-tabs\node_modules\react-navigation-tabs\src\views\ResourceSavingScene.js

..\node_modules\react-navigation-tabs\src\views\ResourceSavingScene.js

..\node_modules\react-navigation-drawer\dist\view\ResourceSavingScene.js

..\node_modules\react-navigation-material-bottom-tabs\node_modules\react-navigation-tabs\dist\views\ResourceSavingScene.js

..\node_modules\react-native-paper\src\components\BottomNavigation.js

--

here is the code to use

removeClippedSubviews={
                 // On iOS, set removeClippedSubviews to true only when not focused
                 // This is an workaround for a bug where the clipped view never re-appears
                 Platform.OS === 'ios' ? navigationState.index !== index : true  //<--  set this to false
               }

Reference: https://github.com/facebook/react-native/issues/25038

Below are other solutions on Git and stackoverflow. Let me know if any of these help.

Stackoverflow: Enable paste and selection within TextInput - React Native

Git: https://github.com/facebook/react-native/issues/20887

Upvotes: 1

Related Questions