Component Not working with react-native 0.63

[meabed]

Hey!
First thank you for the awesome component 🙏
Then :)
After upgrading to latest react-native 0.63 - it stopped rendering at all - when downgrading back works fine - I am not sure it could be something with the deprecation of react-native apis.
It would great if this could fixed soon 👍

Thank you again ❤️

[codler]

I have forked the repo to fix this issue.

npm i @codler/react-native-keyboard-aware-scroll-view

[meabed]

Thanks @codler :) i have tested - its rendering 👍 but not scrolling ;) any special params need to passed? Good job <3

[walterholohan]

@meabed I just used the forked repo in my project and everything is working fine. Maybe is something to do with one of the children in the view.

[meabed]

Thanks a lot :) it works like a charm - I was missing some flex styles 😀

[lukasa1993]

is this repo dead we need to move to fork ?

[rborn]

@lukasa1993 nope, just starting to help with it :)

[lukasa1993]

how can we help?

[rborn]

@lukasa1993 can you test master with RN 0.63 (I didn't upgrade yet my project) and if it works I'll push for an npm publish :)

I just merged #442

[lukasa1993]

it wasnt pushed to npm

[rborn]

@lukasa1993 I know, you need to install the git version

[walterholohan]

@codler added a few commits to his forked repo. Would be good to get all his changes in

[rborn]

@codler whenever you want, please make a PR :)

[Bardiamist]

Hmm in my implementation seems scrollResponderScrollNativeHandleToKeyboard works wrong sometime in React native 0.63.x. Need to investigate more.

[aliasger-rashid]

Its not available on npm. How to use the latest 0.9.2 version ?

[rborn]

npm install https://github.com/APSL/react-native-keyboard-aware-scroll-view#v0.9.2

[BapuHirave]

@rborn @codler and thanks for your efforts. @rborn are you planning to publish (0.92) it to npm ?

[rborn]

@bhirave I don't have rights to publish, we need to wait for @alvaromb

[CyrusZei]

any updates on this? This feels like a perfect example of why you assign more than one who can publish.

[galizhan]

Any updates?

[billnbell]

Please publish to NPM!!

[garganurag893]

Any updates?

[acerbastimur]

Any updates ?

[lukasa1993]

why this took so long any problems?

[Alaa-Ben]

If I understand correctly, there's only one person who have the right to publish to npm, and he's not available for the moment. If you really want to use the latest release, you could just target the tag in your package.json.
(https://github.com/APSL/react-native-keyboard-aware-scroll-view#v0.9.2)

[lukasa1993]

well i am but still strange :D

[CyrusZei]

I have moved away from this component and are using the one that comes directly from react-native instead since for me this has become a liability issue and I made my own keyboard avoid component that works really great.

I have used this component that the author did and I liked for a long time so shout out to the author.

[jsellam]

No update on npm ?

[ede-sous]

Still no update on npm ?

[Pompedup]

I have the same issue, could you update npm asap please ?

[CyrusZei]

I don't think to spam the comments will make the author fix this faster. Just have some patience guys

[lukewlms]

We were able to completely remove this dependency in latest RN just by wrapping any ScrollView in KeyboardAvoidingView. This is working beautifully and got rid of longstanding bugs we had with this library.

The only real trick was ensuring header height is accounted for, which can be done this way if using @react-navigation/stack:

import { useHeaderHeight } from "@react-navigation/stack";

export function useKeyboardAvoidingViewProps(): KeyboardAvoidingViewProps {
  const headerHeight = useHeaderHeight();
  return {
    behavior: "padding",
    // https://stackoverflow.com/questions/48420468/keyboardavoidingview-not-working-properly
    keyboardVerticalOffset: headerHeight,
  };
}

Then just spread those props into KeyboardAvoidingView.

[curiousdustin]

Using @codler's fork, the component does render for me, but when I try to use the ref.props methods, props is undefined.

What is going on here?

[curiousdustin]

Seems possibly related to RN 0.63 change: Make ScrollView use forwardRef

facebook/react-native@d2f314a

[putupadang]

downgrade RN version will be fastest solution 🤣

[luutruong]

@putupadang It's true. lmao

[Arslan106]

any update????? please help

[CyrusZei]

honestly, you don't need this library at all.

I created my own component that works like a charm so create two components

create a file called KeyboardAvoid.tsx and add the code below:

import React from 'react';
import { KeyboardAvoidingView, Platform, KeyboardAvoidingViewProps } from 'react-native';

interface IKeyboardAvoid extends KeyboardAvoidingViewProps {
	children: React.ReactNode;
}

const KeyboardAvoid = ({ children }: IKeyboardAvoid) => {
	return (
		<KeyboardAvoidingView
			behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
			style={{
				display: 'flex',
				justifyContent: 'center',
				flexDirection: 'column',
				backgroundColor: '#ffffff',
				flex: 1
			}}
		>
			{children}
		</KeyboardAvoidingView>
	);
};

export default KeyboardAvoid;

then create another file called RootContainer and add the code below :

import React from 'react';
import styled from 'styled-components/native';
import { ViewProperties, ScrollView } from 'react-native';

interface IContainerProps extends ViewProperties {
	children: React.ReactNode;
	bgColor?: string;
}

const Container = styled.View`
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	background-color: ${(props: IContainerProps) => (props.bgColor ? props.bgColor : '#ffffff')};
`;

const RootContainer = ({ bgColor, children, ...rest }: IContainerProps) => {
	return (
		<ScrollView
			keyboardShouldPersistTaps="handled"
			keyboardDismissMode="on-drag"
			contentContainerStyle={{
				display: 'flex',
				flexGrow: 1,
				justifyContent: 'center'
			}}
		>
			<Container bgColor={bgColor} {...rest}>
				{children}
			</Container>
		</ScrollView>
	);
};

export default RootContainer;

Then for every new screen that you make you just need to add the RootContainer component at the root of that component.

then you need to add the KeyboardAvoid at the root level inside of your App component. That is all you have to do. I am using styled-components for this

[Johbrun]

Thanks @CyrusZei , it works ! 🎉

Just a suggestion : the line import styled from 'styled-components/native'; must be in RootContainer.tsx file, and not KeyboardAvoid.tsx

[CyrusZei]

Yeah true, removed it from the wrong place 😂

[aeirola]

In case someone missed it, 0.9.2 has now been published to npm (https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view/v/0.9.2). Seems to work for me with rn 0.63.2

[okwast]

Seems possibly related to RN 0.63 change: Make ScrollView use forwardRef

facebook/react-native@d2f314a

Yeah, that makes a lot of sense. Also calling the methods directly on the ref without the .props works fine, but it gives a type error then.

However as far as I understood ref and innerRef as now equal making innerRef obsolete. So just take the ref from the KeyboardAwareScrollView and then call the methods on that. Type wise that is even nicer as you don't have to work with the JSX.Element anymore.

[kholood-ea]

another simple solution that could be a good alternative for using this library and needs no external dependency :

import {Keyboard,KeyboardAvoidingView,TouchableWithoutFeedback} from 'react-native';

  const [shiftkeyboard, setShiftkeyboard] = React.useState(false);

//wrap the whole component screen with this 
          return(
             <>
             <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <KeyboardAvoidingView style={styles.container} behavior='position' enabled={shiftkeyboard} >
             <TextInput
                style={......}
                keyboardType="phone-pad"
                placeholder="......."
                onFocus={() => setShiftkeyboard(true)}
             />
               </KeyboardAvoidingView>
               </TouchableWithoutFeedback>
                </>
                 )

[CyrusZei]

Did you just make a hooks keyboard 😁

On Sun, 16 Aug 2020 at 13:46, kholood ***@***.***> wrote: another simple solution that could be a good alternative for using this library and needs no external dependency : import {Keyboard,KeyboardAvoidingView,TouchableWithoutFeedback} from 'react-native'; const [shiftkeyboard, setShiftkeyboard] = React.useState(false); //wrap the whole component screen with this return( <> <TextInput style={......} keyboardType="phone-pad" placeholder="......." onFocus={() => setShiftkeyboard(true)} /> </> ) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#443 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABGR3T3EFYUSCHEGEUTJO53SA7BKJANCNFSM4OXZUW7A> . --

With regards Cyrus_Zei [ *Developer* + *Designer* = *Unicorn*]

[kholood-ea]

Did you just make a hooks keyboard 😁
On Sun, 16 Aug 2020 at 13:46, kholood @.***> wrote: another simple solution that could be a good alternative for using this library and needs no external dependency : import {Keyboard,KeyboardAvoidingView,TouchableWithoutFeedback} from 'react-native'; const [shiftkeyboard, setShiftkeyboard] = React.useState(false); //wrap the whole component screen with this return( <> <TextInput style={......} keyboardType="phone-pad" placeholder="......." onFocus={() => setShiftkeyboard(true)} /> </> ) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#443 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABGR3T3EFYUSCHEGEUTJO53SA7BKJANCNFSM4OXZUW7A . --
With regards Cyrus_Zei [ Developer + Designer = Unicorn]

thanks for making me realize my comment is displayed wrong 😅, good solution up there 👍🏻

[eporomaa]

@CyrusZei
From what I can see your solution does not scroll to selected text fields?

[wmonecke]

We were able to completely remove this dependency in latest RN just by wrapping any ScrollView in KeyboardAvoidingView. This is working beautifully and got rid of longstanding bugs we had with this library.

The only real trick was ensuring header height is accounted for, which can be done this way if using @react-navigation/stack:

import { useHeaderHeight } from "@react-navigation/stack";

export function useKeyboardAvoidingViewProps(): KeyboardAvoidingViewProps {
  const headerHeight = useHeaderHeight();
  return {
    behavior: "padding",
    // https://stackoverflow.com/questions/48420468/keyboardavoidingview-not-working-properly
    keyboardVerticalOffset: headerHeight,
  };
}

Then just spread those props into KeyboardAvoidingView.

KeyboardAvoidingView is incredibly buggy in Android. Are you sure you tested on different devices with different Android API?

[wmonecke]

honestly, you don't need this library at all.

I created my own component that works like a charm so create two components

create a file called KeyboardAvoid.tsx and add the code below:

import React from 'react';
import { KeyboardAvoidingView, Platform, KeyboardAvoidingViewProps } from 'react-native';

interface IKeyboardAvoid extends KeyboardAvoidingViewProps {
	children: React.ReactNode;
}

const KeyboardAvoid = ({ children }: IKeyboardAvoid) => {
	return (
		<KeyboardAvoidingView
			behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
			style={{
				display: 'flex',
				justifyContent: 'center',
				flexDirection: 'column',
				backgroundColor: '#ffffff',
				flex: 1
			}}
		>
			{children}
		</KeyboardAvoidingView>
	);
};

export default KeyboardAvoid;

then create another file called RootContainer and add the code below :

import React from 'react';
import styled from 'styled-components/native';
import { ViewProperties, ScrollView } from 'react-native';

interface IContainerProps extends ViewProperties {
	children: React.ReactNode;
	bgColor?: string;
}

const Container = styled.View`
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	background-color: ${(props: IContainerProps) => (props.bgColor ? props.bgColor : '#ffffff')};
`;

const RootContainer = ({ bgColor, children, ...rest }: IContainerProps) => {
	return (
		<ScrollView
			keyboardShouldPersistTaps="handled"
			keyboardDismissMode="on-drag"
			contentContainerStyle={{
				display: 'flex',
				flexGrow: 1,
				justifyContent: 'center'
			}}
		>
			<Container bgColor={bgColor} {...rest}>
				{children}
			</Container>
		</ScrollView>
	);
};

export default RootContainer;

Then for every new screen that you make you just need to add the RootContainer component at the root of that component.

then you need to add the KeyboardAvoid at the root level inside of your App component. That is all you have to do. I am using styled-components for this

I highly doubt this works like a charm.
KeyboardAvoidingView is very buggy on Android and you clearly still need to test your app on different Android APIs.
I am actually trying to implement KASV to avoid KeyboardAvoidingView.

Here is a screenshot of a KeyboardAvoidingView on Android (Pixel 4, API 29, android:softInputMode:adjustResize)

You can clearly see KAV is not taking into account the software nav buttons.

Ref: facebook/react-native#27526

[tschanz-pcv]

@wmonecke
Thanks for confirming. I also decided to create a custom KeyboardAvoidingScrollView going after reading the "encouraging" comments here but have been getting increasingly frustrated on Android.

On iOS it worked great and with listening for keyboardWillShow (NOT ...Did...) events I can even toggle if scrolling is enabled or not on views which only need to be scrollable when the keyboard shows.

On Android it "works" with the mentioned configs, like setting keyboardVerticalOffset to 0 and not setting behavior at all. But then again I've only tested against one Android device/API. But I also had android:windowSoftInputMode="adjustResize" set so maybe that just took over and all the KeyboardAvoiding stuff didn't work at all.

My main problem is that I would love to somehow get the extraScrollHeight to work on Android. On iOS it's easily achievable using either contentInset or with marginBottom & overflow: 'visible' on the ScrollView but I have no clue on how to achieve a similar feature on Android without breaking it. I can do a negative top margin which "works" in the sense that it looks like an offset but then you can't scroll to the top anymore as that part is of course cut off while the keyboard is open. If anyone has a tip on how to get something similar to extraScrollHeight on Android I would be very happy to hear about it :)

[MorenoMdz]

Anybody does know exactly why it doesnt work in Android with the latest (0.93) release? Is it because of the indowSoftInputMode or some other setting? Neither the native KeyboardAvoidingView works as well in both platforms for some reason.

[Streeterxs]

v0.9.2 worked and our form showed up again

[magrinj]

Hello everyone,

Just created a hook to handle keyboard input like this lib does, but working more efficiently with bottom tabs, and even if ScrollView is not in full screen, feel free to take a look:

yarn add react-native-use-input-scroll-handler

https://github.com/JMagrin/use-input-scroll-handler