We Keep Coding

React Native - useRef for an array (Expo)

Been using Expo and RN on an app, but I'm stuck with a problem. I'm using Expo Video
to make a photo/video gallery. The problem is, if I have more than 1 video in the array, only the last one will play (problem with useRef). And I couldn't find a way to create a ref for each one of them.
Solutions that I've tried and half worked: I created a VideoComponent (as a function then added on return), and each component had its own useRef and useState for playing inside the component a different useRef/useState for video/status for each. It worked okay-ish. But the problem was when other states changed (user presses like, for example). Whenever a state changes, and rerenders, the whole video reset to the beginning. Which is not ok.
The video reset on state change of other components doesn't affect the video if doing it normally (one useRef/state) but as I said, It's only playing the last component, which is not okay.
import React, { useRef, useState } from 'react';
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
StatusBar,
} from 'react-native';
function App(props) {
const [allData, setAllData] = useState([
{
medias: [
{ link: 'https://link.com/link1.avi', mediaExtension: 'avi' },
{ link: 'https://link.com/link2.jpg', mediaExtension: 'jpg' },
{ link: 'https://link.com/link3.mov', mediaExtension: 'mov' },
],
name: 'Name',
description: 'description',
},
]);
const video = useRef(null);
const [status, setStatus] = useState({});
return (
<View style={{}}>
<FlatList
horizontal
data={allData}
renderItem={({ item }) => (
<View style={{}}>
{item.medias.map((item) => (
<View>
{item.mediaExtension === 'mov' || 'avi' || 'WebM' ? (
<View style={{ flex: 1 }}>
<TouchableOpacity
onPress={() =>
video.isPlaying
? video.current.pauseAsync()
: video.current.playAsync()
}>
<Video
ref={video}
style={{ alignSelf: 'center' }}
source={{
uri: item.link,
}}
onPlaybackStatusUpdate={(status) =>
setStatus(() => status)
}
/>
</TouchableOpacity>
</View>
) : (
<Image style={{}} source={{ uri: item.link }} />
)}
</View>
))}
</View>
)}
/>
</View>
);
}
export default App;

As far as I understand, you want to create a FlatList of Videos, and onScroll you want to pause it. This can be implemented as shown below
Also, here is a Working Example for this
import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
import VideoPlayer from './components/VideoPlayer';
const Videos = [
{
_id: 1,
source: require('./assets/videoplayback.mp4'),
},
{
_id: 2,
source: require('./assets/videoplayback.mp4'),
},
{
_id: 3,
source: require('./assets/videoplayback.mp4'),
},
{
_id: 4,
source: require('./assets/videoplayback.mp4'),
},
{
_id: 5,
source: require('./assets/videoplayback.mp4'),
},
{
_id: 6,
source: require('./assets/videoplayback.mp4'),
},
];
export default function App() {
const [Viewable, SetViewable] = React.useState([]);
const ref = React.useRef(null);
const onViewRef = React.useRef((viewableItems) => {
let Check = [];
for (var i = 0; i < viewableItems.viewableItems.length; i++) {
Check.push(viewableItems.viewableItems[i].item);
}
SetViewable(Check);
});
const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 80 });
return (
<View style={styles.container}>
<FlatList
data={Videos}
keyExtractor={(item) => item._id.toString()}
renderItem={({ item }) => <VideoPlayer {...item} viewable={Viewable} />}
ref={ref}
onViewableItemsChanged={onViewRef.current}
viewabilityConfig={viewConfigRef.current}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
and VideoPLayer component looks like this
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import { Video, AVPlaybackStatus } from 'expo-av';
export default function VideoPlayer({ viewable, _id, source }) {
const video = React.useRef(null);
React.useEffect(() => {
if (viewable) {
if (viewable.length) {
if (viewable[0]._id === _id) {
video.current.playAsync();
} else {
video.current.pauseAsync();
}
} else {
video.current.pauseAsync();
}
} else {
video.current.pauseAsync();
}
}, [viewable]);
return (
<View style={styles.container}>
<Video
ref={video}
source={source}
rate={1.0}
volume={1.0}
resizeMode={'contain'}
isLooping
shouldPlay
style={styles.video}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: Dimensions.get('window').width,
marginBottom: 100,
marginTop: 100,
},
video: {
width: Dimensions.get('window').width,
height: 300,
},
});

React Native: Passing useState() data to unrelated screens

Explanation: I am creating a fitness app, my fitness app has a component called WorkoutTimer that connects to the workout screen, and that screen is accessed via the HomeScreen. Inside the WorkoutTimer, I have an exerciseCount useState() that counts every time the timer does a complete loop (onto the next exercise). I have a different screen called StatsScreen which is accessed via the HomeScreen tab that I plan to display (and save) the number of exercises completed.
What I've done: I have quite literally spent all day researching around this, but it seems a bit harder with unrelated screens. I saw I might have to use useContext() but it seemed super difficult. I am fairly new to react native so I am trying my best haha! I have attached the code for each screen I think is needed, and attached a screenshot of my homeScreen tab so you can get a feel of how my application works.
WorkoutTimer.js
import React, { useState, useEffect, useRef } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Button,
Animated,
Image,
SafeAreaView,
} from "react-native";
import { CountdownCircleTimer } from "react-native-countdown-circle-timer";
import { Colors } from "../colors/Colors";
export default function WorkoutTimer() {
const [count, setCount] = useState(1);
const [exerciseCount, setExerciseCount] = useState(0);
const [workoutCount, setWorkoutCount] = useState(0);
const exercise = new Array(21);
exercise[1] = require("../assets/FR1.png");
exercise[2] = require("../assets/FR2.png");
exercise[3] = require("../assets/FR3.png");
exercise[4] = require("../assets/FR4.png");
exercise[5] = require("../assets/FR5.png");
exercise[6] = require("../assets/FR6.png");
exercise[7] = require("../assets/FR7.png");
exercise[8] = require("../assets/FR8.png");
exercise[9] = require("../assets/S1.png");
exercise[10] = require("../assets/S2.png");
exercise[11] = require("../assets/S3.png");
exercise[12] = require("../assets/S4.png");
exercise[13] = require("../assets/S5.png");
exercise[14] = require("../assets/S6.png");
exercise[15] = require("../assets/S7.png");
exercise[16] = require("../assets/S8.png");
exercise[17] = require("../assets/S9.png");
exercise[18] = require("../assets/S10.png");
exercise[19] = require("../assets/S11.png");
exercise[20] = require("../assets/S12.png");
exercise[21] = require("../assets/S13.png");
return (
<View style={styles.container}>
<View style={styles.timerCont}>
<CountdownCircleTimer
isPlaying
duration={45}
size={240}
colors={"#7B4FFF"}
onComplete={() => {
setCount((prevState) => prevState + 1);
setExerciseCount((prevState) => prevState + 1);
if (count == 21) {
return [false, 0];
}
return [(true, 1000)]; // repeat animation for one second
}}
>
{({ remainingTime, animatedColor }) => (
<View>
<Image
source={exercise[count]}
style={{
width: 150,
height: 150,
}}
/>
<View style={styles.timeOutside}>
<Animated.Text
style={{
color: animatedColor,
fontSize: 18,
position: "absolute",
marginTop: 67,
marginLeft: 35,
}}
>
{remainingTime}
</Animated.Text>
<Text style={styles.value}>seconds</Text>
</View>
</View>
)}
</CountdownCircleTimer>
</View>
</View>
);
}
const styles = StyleSheet.create({})
WorkoutScreen.js
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import WorkoutTimer from "../components/WorkoutTimer";
export default function WorkoutScreen() {
return (
<View style={styles.container}>
<WorkoutTimer />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
HomeScreen.js
import React from "react";
import { StyleSheet, Text, View, SafeAreaView, Button } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { AntDesign } from "#expo/vector-icons";
import { Colors } from "../colors/Colors";
export default function HomeScreen({ navigation }) {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.pageRef}>SUMMARY</Text>
<Text style={styles.heading}>STRETCH & ROLL</Text>
<View style={styles.content}>
<TouchableOpacity
style={styles.timerDefault}
onPress={() => navigation.navigate("WorkoutScreen")}
>
<Button title="START WORKOUT" color={Colors.primary} />
</TouchableOpacity>
<TouchableOpacity
style={styles.statContainer}
onPress={() => navigation.navigate("StatsScreen")}
>
<AntDesign name="barschart" size={18} color={Colors.primary} />
<Text style={{ color: Colors.primary }}>Statistics</Text>
<AntDesign name="book" size={18} color={Colors.primary} />
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({})
StatsScreen.js
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { exerciseCount, workoutCount } from "../components/WorkoutTimer";
export default function StatsScreen() {
return (
<View style={styles.container}>
<Text display={exerciseCount} style={styles.exerciseText}>
{exerciseCount}
</Text>
<Text display={workoutCount} style={styles.workoutText}>
{workoutCount}
</Text>
</View>
);
}
const styles = StyleSheet.create({});
Home Screen Image

As far as I can tell, you're almost there! You're trying to get your 2 state
variables from the WorkoutTimer like this:
import { exerciseCount, workoutCount } from "../components/WorkoutTimer";
Unfortunatly this won't work :( . These two variables change throughout your
App's life-time and that kinda makes them "special".
In React, these kinds of variables need to be declared in a parent component
and passed along to all children, which are interested in them.
So in your current Setup you have a parent child relationship like:
HomeScreen -> WorkoutScreen -> WorkoutTimer.
If you move the variables to HomeScreen (HomeScreen.js)
export default function HomeScreen({ navigation }) {
const [exerciseCount, setExerciseCount] = useState(0);
const [workoutCount, setWorkoutCount] = useState(0);
you can then pass them along to WorkoutScreen or StatsScreen with something
like:
navigation.navigate("WorkoutScreen", { exerciseCount })
navigation.navigate("StatsScreen", { exerciseCount })
You'll probably have to read up on react-navigation's documentation for .navigate I'm not sure I remember this correctly.
In order to read the variable you can then:
export default function WorkoutScreen({ navigation }) {
const exerciseCount = navigation.getParam(exerciseCount);
return (
<View style={styles.container}>
<WorkoutTimer exerciseCount={exerciseCount} />
</View>
);
}
and finally show it in the WorkoutTimer:
export default function WorkoutTimer({ exerciseCount }) {
Of course that's just part of the solution, since you'll also have to pass
along a way to update your variables (setExerciseCount and setWorkoutCount).
I encourage you to read through the links I posted and try to get this to work.
After you've accumulated a few of these stateful variables, you might also want to look at Redux, but this is a bit much for now.
Your app looks cool, keep at it!

I ended up solving this problem with useContext if anyone is curious, it was hard to solve initially. But once I got my head around it, it wasn't too difficult to understand.
I created another file called exerciseContext with this code:
import React, { useState, createContext } from "react";
const ExerciseContext = createContext([{}, () => {}]);
const ExerciseProvider = (props) => {
const [state, setState] = useState(0);
//{ exerciseCount: 0, workoutCount: 0 }
return (
<ExerciseContext.Provider value={[state, setState]}>
{props.children}
</ExerciseContext.Provider>
);
};
export { ExerciseContext, ExerciseProvider };
and in App.js I used ExerciseProvider which allowed me to pass the data over the screens.
if (fontsLoaded) {
return (
<ExerciseProvider>
<NavigationContainer>
<MyTabs />
</NavigationContainer>
</ExerciseProvider>
);
} else {
return (
<AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} />
);
}
}
I could call it with:
import { ExerciseContext } from "../components/ExerciseContext";
and
const [exerciseCount, setExerciseCount] = useContext(ExerciseContext);
This meant I could change the state too! Boom, solved! If anyone needs an explanation, let me know!

I think you have to use Mobx or Redux for state management. That will be more productive for you instead built-in state.

TypeError: null is not an object (evaluating ''this.state.torchon')

I don't know what am doing wrong in the code below...I want to toggle flash light on/off during camera capturing, but my code is not working, I tried binding the state in different ways but is still not working for me...Below is my code. Please I need help on how to get this working.
import React, { Component } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { RNCamera } from 'react-native-camera';
import RNFetchBlob from 'rn-fetch-blob';
import Icon from 'react-native-vector-icons/Ionicons';
class cameraComponent extends Component {
toggleTorch()
{
let tstate = this.state.torchon;
if (tstate == RNCamera.Constants.FlashMode.off){
tstate = RNCamera.Constants.FlashMode.torch;
} else {
tstate = RNCamera.Constants.FlashMode.off;
}
this.setState({torchon:tstate})
}
takePicture = async () => {
if(this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
console.log(data.base64)
const path = `${RNFetchBlob.fs.dirs.CacheDir}/test.png`;
console.log('path', path)
try {
RNFetchBlob.fs.writeFile(path, data.base64, 'base64')
}
catch(error) {
console.log(error.message);
}
}
};
render() {
return (
<View style={styles.container}>
<RNCamera
ref = {ref=>{
this.camera=ref;
}}
style={styles.preview}
flashMode={this.state.torchon}
// type = {RNCamera.Constants.Type.back}
>
</RNCamera>
<View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.captureBtn} />
</View>
<TouchableOpacity style={styles.toggleTorch} onPress={this.toggleTorch.bind(this)}>
{ this.state.torchon == RNCamera.Constants.FlashMode.off? (
<Image style={styles.iconbutton} source={require('../images/flashOff.png')} />
) : (
<Image style={styles.iconbutton} source={require('../images/flashOn.png')} />
)
}
</TouchableOpacity>
</View>
);
};
}
export default cameraComponent;

You have not initialized the state anywhere and when you access this.state.torchon it throws the error because this.state is null.
You have to initialize the state.
class cameraComponent extends Component {
this.state={ torchon:RNCamera.Constants.FlashMode.off };
toggleTorch=()=>
{
let tstate = this.state.torchon;
if (tstate == RNCamera.Constants.FlashMode.off){
tstate = RNCamera.Constants.FlashMode.torch;
} else {
tstate = RNCamera.Constants.FlashMode.off;
}
this.setState({torchon:tstate})
}
You can also initialize the state inside the constructor as well.

I want to move some code to inside of a component in react-native, but it will mess up the variable scopes

I have a react-native application I am writing and I want to move some code to an inner component. The problem is if I do this I can't figure out how to make it work because of variable scope. Can someone please take a look?
I have tried moving the code and it doesn't work. I don't know how to write clean code that does this.
import React, {useState} from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { type ImageHolder } from './ImageHolder'
import OuterComponent from "./OuterComponent"
const imageholder2: ImageHolder[] = [
{
id: "1",
actualimage: require("./images/image1.jpeg"),
},
{
id: "2",
actualimage: require("./images/image2.jpg"),
},
{
id: "3",
actualimage: require("./images/image3.jpg"),
},
{
id: "4",
actualimage: require("./images/image4.jpg"),
},
];
//The following code works fine, but I want to move the code to a
//button that is inside of another component.
export default function App() {
const [currentImageIndex, setCurrentImageIndex] = useState(0)
return (
<View>
<View>
{
imageholder2[currentImageIndex] &&
<Image
key={imageholder2[currentImageIndex].id}
style = {{
width: 300,
height: 300,
}}
source={imageholder2[currentImageIndex].actualimage}
/>
}
</View>
<View> /*this button code is what I want to move because my button will be inside another component8?*/
<Button
title= "Press me"
onPress={() => setCurrentImageIndex(currentImageIndex ==
imageholder2.length - 1 ?
0 :
currentImageIndex + 1
)}
/>
</View>
</View>
);
}
/*here is my component with the button, but I don't know how to make the button functionality work because of scope.*/
import React, { Component } from "react";
import {
Image, StyleSheet, View, Text,Dimensions, Button
} from "react-native";
import Animated from "react-native-reanimated";
export default class OuterComponent extends Component {
render() {
return (
<View style ={{
backgroundColor: "#C0C0C0",
flexDirection: 'row',
}}>
<Button
title= "Press me"
onPress={() => setCurrentImageIndex(currentImageIndex ==
imageholder2.length - 1 ?
0 :
currentImageIndex + 1
)}
/>
</View>
)
}
}
/*so in my app.js file I should just be able to do
<OuterComponent /> or something similar and it should work.
The app should simply cycle through the images when the button is pressed.

You can get around variable scope issue by passing a callback function to your inner component and executing all scope specific code within the component that still requires it (in this case your images). It would look something like this:
const scopeSpecificFunction =() => {
...
}
<ParentComponent>
<ChildComponent callbackfunction={()=>scopeSpecificFunction()}>
{...children}
</ChildComponent>
<ParentComponent>
//--------------------
// then the child component (Button) in another file
export default ChildComponent(props)...
<View>
<Button onPress={()=>props.callbackfunction()} />
</View>
I hope that helps and is clear enough. Call backs in general can circumvent inter component scoping issues.

React Native Iterate through Object After Button Click

I want to make it so that I can click a button and go to the next object in my json file. But I am unsure how to continue the for loop on click. I tried adding an i++ to the onpress event in the button but that doesnt work and just errors as I think on press needs to be a function. Any help would be fantastic! I am very new to react-native so sorry if this isnt the way to do it
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Button
} from 'react-native';
var jsonData = require('./skull.json');
export default class flashcards extends Component {
render() {
var i = 0;
for (i; i < 50; i++) {
var skull = jsonData[i];
return (
<View style={styles.container}>
<Text>
Question #{jsonData.quiz.question[i].number}
</Text>
<Text>
{jsonData.quiz.question[i].question}
</Text>
<Image
source={{ uri: jsonData.quiz.question[i].picture }}
style={styles.thumbnail}
/>
<Button
title="Next Question"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
}
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
thumbnail: {
width: 300,
height: 350
}
});
AppRegistry.registerComponent('flashcards', () => flashcards);

Ya I think you need to create state to increase your i , and set the state on your onPress event like this :
export default class flashcards extends Component {
constructor(props) {
super(props);
this.state = {i: 0};
}
onButtonPress = () => {
if(this.state.i < 50){
this.setState({
i: this.state.i + 1
});
}
}
render() {
return (
<View style={styles.container}>
....//your code
<Button
onPress={this.onButtonPress}
title="Next Question"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
}
}
And to call json data you have to change i with this.state.i like this :
jsonData.quiz.question[this.state.i].question
For more details you have to understand about state on react native, you can read on the documentation. I hope this answer can help you.

You need to do like this because this.setState will cause 50 times to re-render when You do this.setState in loop.
export default class flashcards extends Component {
constructor(props) {
super(props);
this.state = {i: 0};
}
onButtonPress = () => {
let val = this.state.i;
if(val < 50){
va += 1
}
this.setState({ i: val });
}
render() {
return (
<View style={styles.container}>
....//your code
<Button
onPress={this.onButtonPress}
title="Next Question"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
}
}