CODEWITHSUNDEEP
react-native
Afik Menashe
Afik Menashe

Reputation: 97

React-Native: Keyboard pushes components up (Android only)

When i try to set value to 'vacuum' the keyboard pushes up the virtual joystick, which isn't happens on ios. I tried to set android:windowSoftInputMode="adjustPan"> in manifest and tried this guide either link but i dont have the getPackage method (neither understood the example usage).

Does anyone know how to solve this? enter image description here

const SemiScreen = () => {

const { setBrushSpeed, setVelSpeed } = useContext(SemiContext); const [vacuum, setVacuum] = useState(0); const [myX, setX] = useState(0);

return ( 

  {/*This View contains the radioView and optionsView*/}
  <View style={styles.buttonsView}>
    {/*This View contains the radio elements */}
    <View style={styles.radioContainer}>
      <RadioButtons type="Velocity" callback={setVelSpeed} />
      <RadioButtons type="Brush" callback={setBrushSpeed} />
    </View>

    {/*This View contains the dislike and vacuum input*/}
    <View style={styles.optionsContainer}>
      {/*This View contains the input and apply button */}
      <View style={{ flexDirection: "column", marginHorizontal: 20 }}>
        <Input
          textContentType="telephoneNumber"
          containerStyle={styles.input}
          value={vacuum}
          placeholder="Vacuum"
          keyboardType="number-pad"
          returnKeyType="done"
          onChangeText={setVacuum}
        />
        <Button
          title="Apply"
          type="clear"
          onPress={() => {
            /*send topic with vacuum */
          }}
        />
      </View>

      <TouchableOpacity
        style={styles.dislike}
        onPress={() => {
          /*send topic*/
        }}
      >
        <AntDesign name="dislike2" size={50} />
      </TouchableOpacity>
    </View>
  </View>

  {/*This View contains the joystick*/}
  <View style={styles.joystickView}>
    <AxisPad
      resetOnRelease={true}
      autoCenter={true}
      size={250}
      onValue={({ x, y }) => {
        // values are between -1 and 1
        //console.warn(x,y)
      }}
    />
  </View>
</View>

); };

Upvotes: 2

Views: 332

Answers (1)

B. Mohammad
B. Mohammad

Reputation: 2464

Use following in your AndroidManifest.xml:

<activity android:windowSoftInputMode="adjustPan"> </activity>

an exemple from an app i work in may it can help:

<application
      android:name="MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:usesCleartextTraffic="true"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:windowSoftInputMode="adjustPan"
            android:launchMode="singleTop"
            android:screenOrientation="portrait"
            android:exported="true"
            />

Upvotes: 1

Related Questions