How to Auto-Slide the Window Out from Behind Keyboard When Textinput Has Focus

React-native how to move screen up on textinput

In 2017 (RN 0.43) there is special component for this: KeyboardAvoidingView

How to move a view when the keyboard shows up in React Native?

How about go now with react-native KeyboardAvoidingView (official docs)

import {KeyboardAvoidingView} from 'react-native';

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
  ... your UI ...
</KeyboardAvoidingView>;

Tested on iOS, for me works fine out of the box. For android consider adding parameter: android:windowSoftInputMode="adjustResize" to your AndroidManifest.xml

Automatically scroll the view up when keyboard is shown in react-native

I assume you are using this solution. I ran into the same problem and made some adjustments (see gist). I addressed both problems you describe. keyboardShouldPersistTaps solves your second problem.

I have not found the exact reason why the spacing works in Simulator but not on a real device. It has something to do with the timing. The original code sets a timeout on input focus and tries to scroll down after 50ms. Increasing this to for example 500ms makes it work on devices too, but I don't really like adding magic timeouts that I don't understand. I changed it, so onFocus I look up the element to scroll to and store a reference. When onKeyboardDidShow fires I use the reference.

Click TouchableOpacity while TextInput is focused

You are nesting a ScrollView with a KeyboardAwareScrollView.

You need to set the keyboardShouldPersistTaps prop on the parent view as well. Consider the following code snippet from your snack.

<KeyboardAwareScrollView keyboardShouldPersistTaps='handled'>
        <SafeAreaView style={styles.container}>
          <ScrollView ref={scrollViewRef} onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })} keyboardShouldPersistTaps='handled'>
            {steps.map(item => { return (<SingleAlgorithmStep key={item["Question"]} step={item} stepsDone={steps} clickedButtons={clickedButtons} algorithmJson={currentAlgorithmJson} actualizeSteps={(item) => updateSteps(item)} actualizeButtons={(item) => updateClickedButton(item)} />) })}
          </ScrollView>
        </SafeAreaView>
</KeyboardAwareScrollView>

This fixed the issue on my device.

Losing TextInput's focus when Keyboard closes

Try keyboardShouldPersistTaps="handled" as ScrollView attribute. I tried the same on your given code and it worked. You can look more into the property details here.

Hope this will help!

Keyboard is not visible in the second time when reaching

You can use 'push' instead of 'navigate'. When navigating to the same interface componentWillMount/componentDidMount is not loading again. That may be the issue. Try with this.

Refer react navigation documentation.
React Navigation Documentation