weird layout behavior in react native when typing in keyboard mode

Question

I have an image(logo) on top of a textInput element after initial animation.the animation works fine and puts the logo at the correct place

when i open the keyboard the logo stays at the same place. but when i fill the fields completely the logo moves down by a little and stays there. A

i am facing the issue only for the element. in my rest of the app there is no issue. Again this issue doesnt happen when keyboard opens but when the fields are added to a certain level

i thought maybe the textinput was changing the overall size so i inspected its style but I found no such thing. Its size was the same

my component

<View style={loginStyle.container}>
      <Animated.View style={[{ transform: [{ translateY: startValue }] },loginStyle.logoStyle,loginStyle.animatedLogoContainer]}>
        <Image source={logo} style={loginStyle.logoSize} />
        </Animated.View> 

..rest of my code

......

the styling

container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    paddingLeft: "17%",
    paddingRight: "17%",
  },

  logoStyle: {
    flex:1,
    resizeMode: "contain",
    position:"absolute",
    width: "120%",
    top: "30%",
    height:44

  },

  logoSize:{
     resizeMode: "contain",
     width:'100%',
     height:44
  },

  animatedLogoContainer:{
    // position:"relative",
    justifyContent:"center",
    height:44
  }
,

my app.json already has the

"android": {
      "softwareKeyboardLayoutMode": "pan",
    },

animation code just in case

   const startValue = new Animated.Value(220);
  const endValue = -60;
  const duration = 1000;


    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
      easing: Easing.linear,
    })

there are two other views as well which has the same position:absolute property but they dont move after anything. so this issue is really very weird for me *

All elements are in absolute position

score 0 · Accepted Answer · answered Jun 16 '21 at 08:51

I managed to solve it but had nothing to do with styling

I simply shifted the start value of the animation to a useState and the issue no longer happens. Anyone one have any idea why this is working ???

// const startValue = new Animated.Value(220);
  const [startValue,changeStartValue]=useState(new Animated.Value(220))

weird layout behavior in react native when typing in keyboard mode

1 Answers1