Develop Reference

Flickering components when animating the maxHeight of the ScrollView (react-native)

I have To-Do list elements which can expand and collapse by pressing the associated button.
By pressing on the EXPAND Button the height of the Animated ScrollView gets adjusted. From 0 to 100 when expanding and from 100 to 0 when collapsing. When we expand two list-objects at the same time, the screen begins to flicker.
Here the code of one single todo-element (it is abbreviated, means the DONE button is not in it):
import React, { useState, useRef, memo } from 'react';
import { Animated, Text, View, Button, ScrollView } from 'react-native';
import longText from '../data/data';
const ListObject = (props) => {
//Object Expand and Collapse feature
const expandValue = useRef(new Animated.Value(0)).current;
const [expandState, setExpand] = useState(false);
const expandAnimation = () => {
Animated.timing(expandValue, {toValue: 100, duration: 1000, useNativeDriver: false}).start();
setExpand(true);
}
const collapseAnimation = () => {
Animated.timing(expandValue, {toValue: 0, duration: 1000, useNativeDriver: false}).start();
setExpand(false);
}
return (
<View style={{ margin: props.margin }}>
<View style={{
flexDirection: 'row',
backgroundColor: 'grey',
borderRadius: 10,
}}>
<Button title='EXPAND' style={{
flex: 1,
backgroundColor: 'blue',
}}
onPress={ expandState ? collapseAnimation : expandAnimation }
/>
</View>
<Animated.ScrollView style={{
flex: 1,
paddingHorizontal: 40,
backgroundColor: 'grey',
borderRadius: 10,
maxHeight: expandValue
}}>
<Text>{ props.text }</Text>
</Animated.ScrollView>
</View>
);
}
export default memo(ListObject);
Here is the code for the App. To make a collection of all todo-elements, I map over a list and assign a key to each element:
mport React, { useRef, useState } from 'react';
import { Animated, StyleSheet, ScrollView, Text, View, SafeAreaView, Button } from 'react-native';
import longText from './src/data/data';
import ListObject from './src/components/list-object'
const styles = StyleSheet.create({
safeContainer: {
flex: 1.2
},
headerContainer: {
flex: 0.2,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: 'lightblue',
},
headerFont: {
fontSize: 50,
textAlign: 'center',
},
scrollContainer: {
flex: 1
}
});
const App = () => {
const numbers = [1,2,3,4,5,6,7,8,9];
const listItems = numbers.map((number) =>
<ListObject key={number.toString()} margin={10} headerText='I am the header of the to-do element' text={longText} />
)
return (
<SafeAreaView style={ styles.safeContainer } >
<View style={ styles.headerContainer }>
<Text style={ [styles.headerFont] }>LIST MAKER</Text>
</View>
<ScrollView style={ styles.scrollContainer }>
{listItems}
</ScrollView>
</SafeAreaView>
);
};
export default App;
I expected no flickering. The flickering appears also on my physical Android device. I have searched for similar problems and checked other libraries how they implement it.

For this, you can use react-native-collapsible
import Accordion from 'react-native-collapsible/Accordion';
const [activeSections, setActiveSessions] = useState([])
const _updateSections = (activeSections) => {
setActiveSessions(activeSections.includes(undefined) ? [] : activeSections)
}
<Accordion
sections={data}
activeSections={activeSections}
duration={400}
renderHeader={_renderHeader}
renderContent={_renderContent}
onChange={_updateSections}
touchableComponent={TouchableOpacity}
renderAsFlatList={true}
expandMultiple={true}
/>
For better performance and a smooth experience use this one.

I found the mistake by myself, it's a beginner's mistake.
Instead of managing the state of the component in the component itself, I had to lift the state up to the parent.
Here the link to the ReactJS learning doc.

How to go from top to bottom of a ScrollView in React Native?

I'm in a React Native project that the client wants the product image scrolls from top to bottom vice versa in a modal, how can I achive this?

I already know how to solve this...
I had to create a counter that increase or decrease Y axis of ScrollView every 0.5 seconds and checking if reached the top or bottom.
In the modal component file:
import React, { useState, useEffect } from 'react';
import { StyleSheet, Modal, ScrollView, View, Image, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
import { Feather } from '#expo/vector-icons';
const ImageModal: React.FC<{ product: ProductType }> = ({ product }) => {
const [ axisY, setAxisY ] = useState<number>(0); // State that is used to know the current Y axis of ScrollView
const [ scrollToTop, setScrollToTop ] = useState<boolean>(false); // State that is used to checks if should go to top or bottom
// Handler that checks if ScrollView is scrolling to top or bottom
const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
// HELP: https://newbedev.com/detect-scrollview-has-reached-the-end
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent; // Get scroll event properties
// If scrolling to top
if (scrollToTop) {
const isNearTop = contentOffset.y != 0; // Checks if Y axis reached the top of ScrollView
setScrollToTop(isNearTop); // Change the state value to FALSE, making ScrollView goes to bottom
} else {
const isNearBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height; // Checks if Y axis reached the bottom of ScrollView
setScrollToTop(isNearBottom); // Change the state value to TRUE, making ScrollView goes to top
}
}
// Increase or decrease current Y axis every 0.5 seconds
useEffect(() => {
const timer = setInterval(() => {
setAxisY(prev => !scrollToTop ? prev + 1.5 : prev - 1.5);
}, 50);
return () => clearInterval(timer);
}, [scrollToTop]);
return (
<Modal
visible={ true }
transparent={ true }
statusBarTranslucent={ true }
animationType="fade"
>
<View style={ styles.container }>
<View style={ styles.box }>
<ScrollView
overScrollMode="never"
style={ styles.scroll }
scrollEnabled={ false }
showsVerticalScrollIndicator={ false }
contentOffset={{ x: 0, y: axisY }}
onScroll={ handleScroll }
>
<View style={ styles.imageBox }>
<Image source={{ uri: product.image_url }} style={ styles.image } />
</View>
</ScrollView>
<View>
<Text>Some random text!</Text>
</View>
</View>
<TouchableOpacity style={ styles.closeButton } onPress={ onClose }>
<Feather name="x" size={ 30 } color="#fff" />
</TouchableOpacity>
</View>
</Modal>
);
}
// Main Styles
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
padding: 20
},
closeButton: {
width: 60,
height: 60,
borderWidth: 2,
borderRadius: 12,
marginLeft: 20,
borderColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#58585a'
},
box: {
backgroundColor: '#fff',
width: '80%',
borderRadius: 10,
flexDirection: 'column'
},
scroll: {
width: '100%',
height: '80%',
borderBottomWidth: 1,
borderColor: '#58585a'
},
imageBox: {
width: '100%',
height: 600,
},
image: {
width: '100%',
height: '100%',
resizeMode: 'cover',
borderTopLeftRadius: 10,
borderTopRightRadius: 10
}
});
export default ImageModal;

Stack Navigator issue in a react-native expo app

I have some sample code in an expo 38.0 react-native app that has a login, signup and forgotpwd screens. The navigation between these screens is controlled by a Stack Navigator (using react navigation 5.x) with login screen as the initial screen.
The stack navigator works as expected on my android phone, but there is a problem when Back button is pressed on ForgotPwdScreen component. The problem is that a moment after the login screen shows its contents everything on this screen suddenly moves down by a few pixels. I researched a lot for the last one day but nothing seemed to work. I have tried wrapping contents in SafeAreaView in login screen but it didn't help.
But if I include ForgotPwdScreen code in App.js then this problem is no more there. Only if ForgotPwdScreen is in its own separate file does this problem happen.
The full code sample is at the following snack: Working code for this issue
A video of this issue can be seen at Issue of stack navigator
This issue only happens on android phone and not on iphones.
Question : Why are the contents suddenly moving down in login screen after it has fully rendered when back button is pressed on ForgotPwdScreen but only when ForgotPwdScreen is in a separate js file?
Code files are as below.
package.json
{
"dependencies": {
"expo-status-bar": "^1.0.2",
"react-native-screens": "~2.9.0",
"#react-navigation/stack": "^5.9.1",
"react-native-reanimated": "~1.9.0",
"#react-navigation/drawer": "^5.9.1",
"#react-navigation/native": "^5.7.4",
"react-native-safe-area-context": "~3.0.7",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/async-storage": "~1.11.0"
}
}
App.js
import React, { useState } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
KeyboardAvoidingView,
ScrollView,
StatusBar,
Keyboard,
ActivityIndicator,
Platform,
Image,
} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import {
createStackNavigator,
TransitionSpecs,
HeaderStyleInterpolators,
CardStackStyleInterpolator,
CardStyleInterpolators
} from '#react-navigation/stack';
import LoginScreen from './components/LoginScreen'
import ForgotPwdScreen from './components/ForgotPwdScreen'
function SignUpScreen () {
/* Component state. Change someState, setEnteredSomeState and state object as per your scenario. */
const [someState, setEnteredSomeState] = useState({
state1: '',
state2: '',
state3: false,
});
return (
<View style={styles.container}>
{/* Set statusbar background color and style so it blends with the screen */}
<StatusBar backgroundColor="#fff" barStyle="dark-content" />
<Text style={styles.label}>SignUp will show here</Text>
</View>
);
}
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Login"
screenOptions={{
headerShown: false,
headerTitleAlign: 'center',
headerMode: 'screen',
}}>
<Stack.Screen
name="Login"
component={LoginScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="ForgotPwd"
component={ForgotPwdScreen}
options={{ headerShown: true }}
/>
<Stack.Screen
name="SignUp"
component={SignUpScreen}
options={{ headerShown: true }}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#fff',
},
scroll: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
},
inputView: {
width: '80%',
backgroundColor: '#fff',
height: 50,
marginBottom: 20,
justifyContent: 'center',
alignSelf: 'center',
textAlign: 'left',
padding: 20,
borderBottomColor: 'black',
borderBottomWidth: 1,
marginTop: -20,
},
inputText: {
height: 50,
color: 'grey',
},
loginBtn: {
width: '70%',
backgroundColor: '#F26722',
height: 50,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
marginTop: 40,
marginBottom: 10,
borderWidth: 1,
borderColor: '#F26522',
},
loginText: {
color: 'white',
},
forgotText: {
color: '#337ab7',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
marginTop:20,
},
signupText: {
color: '#337ab7',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
forgotBtn: {
height: 50,
width:'100%',
marginTop:10,
},
signupBtn: {
height: 50,
width:'100%',
marginTop:20,
},
label: {
textAlign: 'center',
},
});
export default App;
ForgotPwdScreen.js
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, ScrollView} from 'react-native';
export default function ForgotPwdScreen() {
return (
<View style={styles.container}>
{/* Set statusbar background color and style so it blends with the screen */}
<StatusBar backgroundColor="#fff" barStyle="dark-content" />
<Text style={styles.label}>ForgotPwd will show here</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
label: {
textAlign: 'center',
},
});
LoginScreen.js
import React, { useState } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
KeyboardAvoidingView,
ScrollView,
StatusBar,
Keyboard,
ActivityIndicator,
Platform,
Image,
} from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
export default function LoginScreen({ route, navigation }) {
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={styles.scroll}
keyboardShouldPersistTaps="always">
<StatusBar backgroundColor="#fff" barStyle="dark-content" />
<TouchableOpacity
style={styles.forgotBtn}
onPress={() => navigation.navigate('ForgotPwd')}>
<Text style={styles.forgotText}>Forgot Password?</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.signupBtn}
onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.signupText}>Signup</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#fff',
},
scroll: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
},
forgotText: {
color: '#337ab7',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
marginTop: 20,
},
signupText: {
color: '#337ab7',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
forgotBtn: {
height: 50,
width: '100%',
marginTop: 10,
},
signupBtn: {
height: 50,
width: '100%',
marginTop: 20,
},
});

At last after 2 days of trying, I found the reason for this odd behavior.
This issue was happening due to expo-status-bar package that was included in ForgotPwdScreen.js. When I removed the import for expo-status-bar and instead used the StatusBar component that comes in react-native then the issue disappeared.
So, clearly there is some issue with expo-status-bar. It's best to not use it and rather use the default StatusBar that comes with react-native.
Original imports in ForgotPwdScreen.js
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, ScrollView} from 'react-native';
Changed imports in ForgotPwdScreen.js that resolved the issue
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, ScrollView, StatusBar} from 'react-native';

React native keyboard's height changes entire view

My layout with two inputs and a button works well without the keyboard. But as soon as I clicked the input box the keyboard appears and changes the height of the screen. Then things align wrong . I already tried using keyboard avoiding view. But the error is still there.
import {
StyleSheet,
Text,
View,
TextInput,
Button,
KeyboardAvoidingView,
} from 'react-native';
import { Formik} from 'formik';
import React, { Component } from 'react';
class Demo extends Component {
render(){
return (
<KeyboardAvoidingView style={styles.container} behavior= "position , padding , height">
<View style={styles.container}>
<Text style={styles.titleText}>Profile settings</Text>
<View style={styles.card}>
<Formik
initialValues={{
name: '',
mobile: '',
}}
onSubmit={(values) => {
console.log(JSON.stringify(values));
}}>
{(props) => (
<View>
<TextInput
placeholder={'name'}
onChangeText={props.handleChange('name')}
value={props.values.name}
style={styles.cardTextSmall}
/>
<TextInput
placeholder={'email'}
onChangeText={props.handleChange('mobile')}
value={props.values.mobile}
style={styles.cardTextSmall}
/>
<Button
title={'submit'}
/>
</View>
)}
</Formik>
<View style={styles.centerButton}></View>
</View>
</View>
</KeyboardAvoidingView>
);
};
}
const styles = StyleSheet.create({
centerButton: {
top: '1%',
alignContent: 'center',
alignItems: 'center',
},
titleText: {
fontFamily: 'Segoe UI',
fontSize: 30,
position: 'relative',
left: '7%',
top: 72,
},
cardContent: {
paddingHorizontal: '10%',
marginHorizontal: 10,
},
cardTextLarge: {
paddingTop: '15%',
fontSize: 18,
color: '#A6A6A6',
fontFamily: 'Segoe UI',
},
cardTextSmall: {
borderBottomColor: 'black',
borderBottomWidth: 1,
fontFamily: 'Segoe UI',
fontSize: 18,
color: '#404040',
},
cardTextModule: {
paddingLeft: '15%',
paddingTop: '2%',
fontFamily: 'Segoe UI',
fontSize: 18,
width: '100%',
color: '#404040',
},
card: {
borderRadius: 6,
backgroundColor: 'red',
shadowOpacity: 0.3,
shadowOffset: {width: 1, height: 1},
marginHorizontal: 4,
left: '6.5%',
top: '19%',
height: '78%',
width: '85%',
margin: 'auto',
position: 'relative',
zIndex: -1,
},
});
export default Demo;
I'm a beginner here. If you could please give me some explanation. thanks!

This is happening because you have used KeyboardAvoidingView with one of the behavior as padding. So whenever you click on TextInput it adds bottom padding to the view and view moves towards the top.
If you don't want it to happen, use View tag instead of KeyboardAvoidingView.

I can not move the text

Text is not moving, I tried to use justifyContent, alignItems and textAlign but not working. Working on visual studio and react-native, using my phone to emulator.
you can see the code ^^
I hope that u can help me
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
Image,
Picker,
ImageBackground
} from 'react-native';
export default class App extends Component {
render() {
return (
<ImageBackground
source={require('./resim.jpg')}
style={styles.container}>
<View styles={styles.overlayContainer}>
<View styles={styles.top}>
<Text style={styles.header}>FIRST</Text>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%',
},
overlayContainer: {
flex: 1,
backgroundColor: 'rgba(47,163,218, .4)',
},
top: {
height: '50%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white'
},
header: {
color: '#fff',
fontSize: 28
}
});
Please help me guys please.

overlayContainer: { flex: 1,backgroundColor:'rgba(47,163,218, .4)' },
top: { height: '50%', alignItems: 'center',justifyContent: 'center',backgroundColor: 'white' },
header: { color: '#fff', fontSize: 28 }
Try:
Add width size for top style and overlayContainer style