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.

Image Background in React not working as intented

I have to make this app on react and to make it interesting i decided to import ImageBackground in my App.js. But when i implemented it nothing happened, the output was still blank. I was confused at first but decided maybe i needed some styling.
What i expected was the image to cover the whole output screen.
However the screen was still blank.
No error messages.
I had a look on the documentation of ImageBackground and used this:
return(
<View style={styles.container}>
<ImageBackground source={require("./assets/myBgImage.png")} style={styles.imgBg}>
</ImageBackground>
</View>
);
All i get is a blank screen.
But the weird thing is, when i add some text, the part where the text is located is now having
that part with the image. Its hard to explain on text so i will include an image.
Here is the new code:
return (
<View styles={styles.container}>
<ImageBackground source={require('./assets/myBgImg.png')} styles={styles.imageBg}>
<Text>1</Text>
<Text>2</Text>
<Text>3</Text>
<Text>4</Text>
<Text>5</Text>
</ImageBackground>
</View>
);
And here is the output:
Output
Heres the above mentioned styling:
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
justifyContent: 'center',
padding: 24,
},
imageBg: {
flex:1,
width: "100%",
height: "100%",
resizeMode: 'cover',
justifyContent: 'center',
},
});
Here is the background image: Background Image
I've run out of things to do now (which isnt much considering im a beginner at react)
What should i do?
Heres the whole code(I've commented code for later use since the background isnt there):
import * as React from 'react';
import {
ImageBackground,
View,
TouchableOpacity,
Text,
StyleSheet,
Image,
Button,
Dimensions,
} from 'react-native';
import { Audio } from 'expo-av';
import djImg from './assets/djImg.png';
import djBgImg from './assets/djBgImg.png';
import useOrientation from './hooks/useOrientation.js' // Portrait and landscape mode
const Width = Dimensions.get('window').width;
const Height = Dimensions.get('window').height;
const image1 = {
uri:
'https://www.fonewalls.com/wp-content/uploads/2020/09/Border-Edge-Neon-AMOLED-Black-Wallpaper-01-300x585.jpg',
};
/*
function NavigationBar(){
var orientation = useOrientation();
var a;
if(orientation){
a = 1
} else if(orientation === false){
a = 0
}
if(a === 1){
return (
<View>
<Text style={styles.text1}>☰ MidiPad</Text>
</View>
);
} else if(a === 0){
return (
<View>
<Text style={styles.text2}>☰ MidiPad</Text>
</View>
);
}
}
*/
export default function App() {
var orientation = useOrientation();
var a;
return (
<View styles={styles.container}>
<ImageBackground source={require('./assets/djBgImg.png')} styles={styles.imageBg}>
<Text>1</Text>
<Text>2</Text>
<Text>3</Text>
<Text>4</Text>
<Text>5</Text>
</ImageBackground>
</View>
);
}
/* if(orientation){
a = 1
} else if(orientation === false){
a = 0
}
if(a === 1){
return (
<View style={styles.container}>
<ImageBackground source={image1} resizeMode="cover" style={styles.imageBg}>
</ImageBackground>
</View>
)
} else if(a === 0){
return (
<View style={styles.container}>
<NavigationBar />
<ImageBackground source={image1} style={styles.imageBg}>
</ImageBackground>
</View>
)
}
*/
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
justifyContent: 'center',
padding: 24,
},
text1: {
backgroundColor: 'black',
fontSize: 30,
fontWeight: 'bold',
paddingLeft: 10,
paddingRight: 50,
color: 'grey',
marginLeft: 0
},
text2: {
backgroundColor: 'black',
fontSize: 30,
fontWeight: 'bold',
paddingLeft: 10,
paddingRight: 220,
color: 'grey',
marginLeft: 0
},
imgStyle1: {
transform: [{scale: 0.5}]
},
imgStyle2:{
transform: [{scale: 1.15}],
marginBottom: 120,
},
imageBg: {
flex:1,
width: "100%",
height: "100%",
resizeMode: 'cover',
justifyContent: 'center',
},
text: {
color: '#f44336'
},
});
Heres the snack link: https://snack.expo.dev/#atharvasrivastava/midipad

A blank ImageBackground is not going to help. You need to have some children to get it working. If your wrap your App component code inside <ImageBackground> Children goes here..</ImageBackground> it will work like you see with your contents inside.

Open another screen in react-native

I have this screen in react native
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
HYGEX
</Text>
<View>
<TextInput
placeholder="Username"
style={styles.formInput}
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.formInput1}
/>
<TouchableHighlight style={styles.button}
onPress={() => this.move()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
move() {
//what i can do here to go to Socrce screen ???
}
}
Something like login screen, now when I click into TouchableHighlight
I need to open this screen
'use strict';
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class HygexListView extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
module.exports = HygexListView;
I tried to implement move method but I failed! Any idea why?
Does react-native have a method to change the screen when click into TouchableHighlight?

As others pointed out, you have to use an instance of Navigator to transition between screens. Maybe you can have a look at the example apps in the React Native repo. I also find this router package quite easy to set up, and it also includes an example app that you can use as a starting point.
Edit
As a simple example using react-native-router-flux, you can edit the Example.js file in the Example directory to look like this:
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import LoginView from './LoginView';
import HygexListView from './HygexListView';
import {
Scene,
Router,
Actions,
} from 'react-native-router-flux';
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
alignItems: 'center',
},
tabBarStyle: {
backgroundColor: '#eee',
},
tabBarSelectedItemStyle: {
backgroundColor: '#ddd',
},
});
// define this based on the styles/dimensions you use
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
const style = {
flex: 1,
backgroundColor: '#fff',
shadowColor: null,
shadowOffset: null,
shadowOpacity: null,
shadowRadius: null,
};
if (computedProps.isActive) {
style.marginTop = computedProps.hideNavBar ? 0 : 64;
style.marginBottom = computedProps.hideTabBar ? 0 : 50;
}
return style;
};
class Example extends Component {
render() {
return (
<Router getSceneStyle={getSceneStyle}>
<Scene key="login" component={LoginView} initial={true}/>
<Scene key="hygex" component={HygexListView } />
</Router>
);
}
}
export default Example;
Then, in your component's move function, you have to do the following:
move(){
Actions.hygex(); // This will perform a slide transition, but you can customize it. Have a look at the docs for that.
I have not tested the code, so there might be some typos/missing imports/code, but it should give you an idea of what you have to do.
}

You have to implement a Navigator, which is roughly a component that manages all stuff related to screens, and header bar with back button and etc.
As you are a beginner, I suggest you to look at the docs on this link:
https://facebook.github.io/react-native/docs/navigator.html
Sorry for the short answer, I'm on my phone.
Good luck!

"use strict";
var React = require("react-native");
var {
Component,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
View,
} = React;
var SecureView = require("./SecureView");
class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Sign In
</Text>
<View>
<TextInput
placeholder="Username"
onChange={(event) => this.setState({username: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.username} />
<TextInput
placeholder="Password"
secureTextEntry={true}
onChange={(event) => this.setState({password: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.password} />
<TouchableHighlight onPress={(this.onSubmitPressed.bind(this))} style={styles.button}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>
</View>
</View>
);
}
onSubmitPressed() {
this.props.navigator.push({
title: "Secure Page",
component: SecureView,
passProps: {username: this.state.username, password: this.state.password},
});
}
};
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: "stretch"
},
title: {
fontSize: 18,
marginBottom: 10
},
formInput: {
height: 36,
padding: 10,
marginRight: 5,
marginBottom: 5,
marginTop: 5,
flex: 1,
fontSize: 18,
borderWidth: 1,
borderColor: "#555555",
borderRadius: 8,
color: "#555555"
},
button: {
height: 36,
flex: 1,
backgroundColor: "#555555",
borderColor: "#555555",
borderWidth: 1,
borderRadius: 8,
marginTop: 10,
justifyContent: "center"
},
buttonText: {
fontSize: 18,
color: "#ffffff",
alignSelf: "center"
},
});
module.exports = LoginView;

You have to use navigator. please read the documentation as mentioned below. and if you will need then i will share you my code.
Here is an example: NavigatorExample

Rendering a list on initial page using react-native for Android

Hi everyone,
I am new to Android development using react-native and I got this error which I have no idea where this come from because I am not using ScrollView at all!
I am trying to render a list on the initial screen and its data is coming from an api call.
My code is
import React, { Component } from 'react';
import {
Image,
ListView,
TouchableHighlight,
Text,
View,
StyleSheet
} from 'react-native';
import Api from '../../Utils/api';
import CategoryRow from './CategoryRow';
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 12,
flexDirection: 'row',
alignItems: 'center',
},
text: {
marginLeft: 12,
fontSize: 16,
},
photo: {
height: 40,
width: 40,
borderRadius: 20,
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
}
});
class Main extends React.Component {
constructor(props){
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
}
}
componentDidMount(){
Api.getCategories()
.then((res) => {
this.setState({
dataSource: ds.cloneWithRows(res)
})
})
.catch();
}
render() {
return(
<ListView
style={styles.container}
dataSource = {this.state.dataSource}
renderRow={(data) => <CategoryRow {...data} />}
/>
)
}
}
module.exports = Main;
And the code for categoryRow is:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 12,
flexDirection: 'row',
alignItems: 'center',
},
text: {
marginLeft: 12,
fontSize: 16,
},
photo: {
height: 40,
width: 40,
borderRadius: 20,
},
});
const CategoryRow = (props) => (
<View style={styles.container}>
<Text style={styles.text}>
${props.name}
</Text>
</View>
);
export default CategoryRow;
Example of data :
[
{
"categoryId": 1,
"code": "15",
"name": "Photography",
"description": "Are you a photo junkie? Then join the “snap pack” and travel to some of the most photogenic places on earth. Our photography trips put you on an itinerary specially geared towards getting the perfect pic, with a group of like-minded travellers. Learn new tricks, share your knowledge, and never worry about taking the time to get the shot. Bonus: someone always has an extra lens cap.",
"categoryTypeId": 1,
"categoryType": {
"categoryTypeId": 1,
"name": "Activity"
}
}
]
Can someone please help me to find out where is the problem and how to resolve this error?

I think ListView uses the ScrollView props. See here http://facebook.github.io/react-native/releases/0.35/docs/listview.html#scrollview
From the error, it seems you should specify alignItems: 'center' in the contentContainerStyle prop of the ListView. Remove it from styles.container
<ListView contentContainerStyle={{alignItems: 'center'}}>
....
</ListView>

render() {
return(
<View style={{
alignItems: 'center'
}}>
<ListView
style={styles.container}
dataSource = {this.state.dataSource}
renderRow={(data) => <CategoryRow {...data} />}
/>)
</View>
}

Best way to create a grid of TouchableOpacity items with different callbacks?

I have an app where I want to show a list of images as a grid with the first element on the list being an "add"-button. I also need every image to be Touchable. Currently my code looks like this:
class RNtest extends Component {
constructor() {
super();
this.state = {
data: [],
counter: 0 //Used to give unique numbers to the items
};
}
itemPicker() {
var temp = this.state.data;
temp.push({text: this.state.counter});
this.setState({
data: temp,
counter: this.state.counter + 1
});
}
onPress() {
console.warn('YO!');
}
render() {
return (
<ScrollView style={styles.body}>
<View style={styles.section}>
<Text style={styles.sectionHeader}>ITEMS</Text>
<View style={styles.gallery}>
<TouchableOpacity
style={styles.addButton}
onPress={this.itemPicker.bind(this)}
>
<Text>ADD</Text>
</TouchableOpacity>
{this.state.data.map(function(item) {
return (
<TouchableOpacity
style={styles.item}
onPress={this.onPress.bind(this)}
>
<Text>{item.text}</Text>
</TouchableOpacity>
);
})}
</View>
</View>
</ScrollView>
);
}
}
The stylesheet in case someone needs it:
var styles = StyleSheet.create ({
addButton: {
alignItems: 'center',
justifyContent: 'center',
height: 72,
width: 72,
borderRadius: 2,
marginVertical: 6,
marginRight: 6,
backgroundColor: 'white'
},
gallery: {
flexDirection: 'row',
flexWrap: 'wrap'
},
item: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#DCFFC2',
height: 72,
width: 72,
borderRadius: 2,
margin: 6
},
section: {
flexDirection: 'column',
paddingTop: 10
},
sectionHeader: {
fontSize: 13,
fontWeight: '400',
paddingBottom: 1,
color: '#A7A7A7'
},
body: {
flex: 1,
backgroundColor: '#EEEEEE',
paddingVertical: 10,
paddingHorizontal: 20
},
});
Obviously the onPress function doesn't work because apparently this is not visible inside the for-loop.
I could use ListView but then inside renderRow I would have to check if the item to be rendered is the add button, and it would make a few other parts more difficult as well.
Could I use refs in this situation, and is it a good idea?
I'm running React Native 0.27.2 on Android emulator.

If the only the problem you're having at the moment is scope-related, this can best be corrected by specifying a scope for your map function that processes your this.state.data. However I see a couple of other issues to comment on with your code.
Your itemPicker function is directly mutating your state via the push function. Opt for using a function such as concat which will return a new array (or the spread operator). Refer to the docs for reasons why you shouldn't directly mutate state like this.
Make sure you add a unique key to the resulting TouchableOpacity items you're creating (see warnings from React)
I've modified your code sample to demonstrate these concepts:
import React, { Component } from 'react';
import {
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
class RNTest extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
counter: 0
};
}
itemPicker() {
// 'push' will mutate, concat will return a new array
this.setState({
data: this.state.data.concat({text: this.state.counter}),
counter: this.state.counter + 1
});
}
createButton (item, index) {
// add a unique key, per react warnings
return (
<TouchableOpacity
key={index}
style={styles.item}
onPress={this.onPress}>
<Text>{item.text}</Text>
</TouchableOpacity>
);
}
onPress() {
console.warn('YO!');
}
render() {
return (
<ScrollView style={styles.body}>
<View style={styles.section}>
<Text style={styles.sectionHeader}>ITEMS</Text>
<View style={styles.gallery}>
<TouchableOpacity
style={styles.addButton}
onPress={this.itemPicker.bind(this)}
>
<Text>ADD</Text>
</TouchableOpacity>
{this.state.data.map(this.createButton, this)}
</View>
</View>
</ScrollView>
);
}
}
export default RNTest;

Try using arrow function:
{this.state.data.map((item) => {
// your code
})}
Or you could use bind:
{this.state.data.map(function(item) {
return (
<TouchableOpacity
style={styles.item}
onPress={this.onPress.bind(this)}
>
<Text>{item.text}</Text>
</TouchableOpacity>
);
}.bind(this))}
What both solutions do is passing the this parameter to inside your loop.