React Native General Help Android & IOS

Greenhorn

Posts: 1

posted 5 months ago

Number of slices to send:

Optional 'thank-you' note:

Send

My goal to traverse through the array with a push of the button and then add some conditional logic to navigate to another screen. I am using an online IDE to build the UI/UX: snack .expo.dev, but I am also issues with the build in the dev env that always seems to resolve itself after a couple tries. I would like to have a consistent build every time, so you are able to assist with that I would greatly appreciate it.
What am missing with this:

import {useState, useEffect, useRef} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native';
import ProgressStep from '../components/ProgressStep'
import StyledButton from '../components/Button'

export default function lessonGreeting() {

const [lessonText, setLessonText] = useState(true);

const [displayFlex, setDisplayFlex] = useState('flex');
  const [displayNone, setDisplayNone] = useState('none');

const modalReduce = [
      'Great job learning about the history of the Taíno people!',
      'Let’s learn how to introduce ourselves in Taíno!',
      'Tau, dak’anulia...\vHello, my name is...'
    ];
  const indexRef = useRef(0);

const [ref, setRef] = useState(0);

// useEffect(() => {
  //  indexRef.current = indexRef.current; 
  // }, [])

useEffect(() => {
    if(!lessonText) {indexRef.current = () => indexRef.current + 1
    }
    //  else {
    //   setDisplayFlex('none'); 
    //   setDisplayNone('flex'); 
    //   setLessonText(false);
    //   return indexRef.current;
    // } 
  }, [lessonText, indexRef])

return (
  <View style={styles.lessonContainer}>
    <View style={styles.progressWrapper}>
      <ProgressStep onPress={() => {setDisplayFlex('flex'); setDisplayNone('none'); setLessonText(true)}} />
    </View>

<View style={[styles.lessonTextWrapper, {display: displayFlex}]}>
      <Text style={styles.lessonText}>
        Lesson 1: Greetings
      </Text>
    </View>

<View style={[styles.textWrapper, {display: displayFlex}]}>
      <Text style={styles.lessonTextBottom}>
        Learn how to say hello and introduce yourself.
      </Text>
    </View>

<View style={[styles.modalTextWrapper, {display: displayNone}]}>
      <Text style={styles.modalText}>
        {modalReduce[indexRef.current]}
      </Text>
    </View>
    
      <View style={[styles.buttonWrapper, {paddingTop: lessonText ? 284 : 46}]}>
      <StyledButton   
      title={lessonText ? 'Start' : 'Continue'}
      titleColor={'#fff'}
      titleSize={16}
      backgroundColor={'#355725'}
      width= {294}
      height={48}
      accessibilityLabel={'Button'}
      onPress= {() => setModalText()}
      icon={false}
      buttonText={styles.buttonText}
      otherProps={styles.buttonNav} />
    </View>

</View>
  )
}