just4fun / react-native-sticky-keyboard-accessory Goto Github PK

Hey,

Here is my code :

export default class FeedFriends extends React.Component {

  constructor() {
    super();
  }

render () {
  return (

    <View style={{flex:1, backgroundColor:'white'}}> 

    
     <KeyboardAccessory>
	  <View style={{ flexDirection: 'row', height: 40 }}>
	    <TextInput
	      style={{ flex: 1, height: 30, borderWidth: 1 }}
	      placeholder='Click me!' />
	  </View>
	</KeyboardAccessory>


    </View>           

    );
  }
}

And here is what I get when I click on the <TextInput/> :

I'm using Expo : v30.0.0
React : v16.3.1
React Native : 0.55.4
Bugs on iPhone 6S and Android Huawei P6 2018

EDIT : I'm also using react-navigation : 2.13.0. And createMaterialTopTabNavigator with TabBarPosition: "bottom".

If I put TabBarPosition: "top", it removes the bug :

Thanks for your help ! :-)

here is my ios, android screen.

I have some problem in android.
I think it goes up twice as high as the keyboard. (android)
what can i do?? please help me T.T

here is my code

import React from 'react';
import {
View,
Keyboard,
TextInput,
StyleSheet,
SafeAreaView
} from 'react-native';

import CustomIcon from '../components/CustomIcon';

import Icon from 'react-native-vector-icons/FontAwesome';
import KeyboardAccessory from 'react-native-sticky-keyboard-accessory';

export default class InfromScreen extends React.Component {
render() {
return (






<Icon
style={styles.keyboardAccessoryItem}
name='angle-down'
size={30}
onPress={() => Keyboard.dismiss()} />




);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
},
wrapper: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center'
},
keyboardAccessoryContainer: {
flexDirection: 'row',
height: 40,
paddingHorizontal: 20,
alignItems: 'center'
},
keyboardAccessoryItem: {
color: '#979797',
marginLeft: 10
},
input: {
flex: 1,
height: 30,
paddingHorizontal: 10,
borderWidth: 1,
borderRadius: 5,
borderColor: '#ddd',
backgroundColor: '#fff'
},
});

Firstly, this is a great component!

Secondly, I understand the reasoning behind adding getBottomSpace() but it doesn't take into consideration whether or not the view is inside a modal, which overlays any tabbed navigation.

I recommend adding a final prop to ensure this is fixed for future issues, let me know if you'd like me to make a PR.

Thank you again!

Samir

Any solutions?

    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.2",
    "react-native-reanimated": "^1.4.0",
    "react-native-sticky-keyboard-accessory": "^0.1.3",

Right now the license of this project is only mentioned in the package.json. It's best to also create a LICENSE file matching it.