Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

TextInput in FlatList item gets unfocused when changing value

$
0
0

Im using a nested object wich is safed in my redux store to render my FlatList. In each set item I got a textInput to change the reps in my set but every time I change the value of the input it gets unfocused and the keyboard dismisses. Is their a way to stop the input of getting unfocused?

My object:

Workout:{    ExercisList:[        {           sets to render:[            {set 1 },            {set 2},            {set 3},           ]        },        .        .        .    ]}

Flatlist:

<View><FlatList      data={workout.exerciseList.find((exerciseList) => exerciseList.elid === route.params.elid)?.sets}      renderItem={renderItem}      extraData={workout.exerciseList.find((exerciseList) => exerciseList.elid === route.params.elid)?.sets}      keyExtractor={(item) => item.sid.toString()}/></View>

RenderItem:

const renderItem = ({ item }: { item: Set }) => {    return (<Item            key={item.sid}            sid={item.sid}            elid={item.elid}            sortOrder={item.sortOrder}            reps={item.reps}            weightKG={item.weightKG}            weightLBS={item.weightLBS}            finished={item.finished}        />    );};

Item:

    const Item = ({ sortOrder, reps, weightKG, weightLBS, sid, elid }: Set, key: any) => {    return (<Swipeable            rightThreshold={30}            renderRightActions={() => (<View style={{ backgroundColor: "red" }}><Text>Delete</Text></View>            )}            onSwipeableRightOpen={() => console.log("Delete Set")}><View style={styles.item} key={key}><Text>{sortOrder}</Text><Text>{lang.t("reps")}</Text><TextInput                    key={sid}                    onChangeText={(reps) => changeReps(reps, sid, elid)}                    value={reps.toString()}                    keyboardType='number-pad'></TextInput></View></Swipeable>    );};

ChangeRepsHere the workout object in my redux store gets changed.

const changeReps = (reps: string, sid: string, elid: string) => {    dispatch(updateRepsWorkout(parseInt(reps), sid, elid));};

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>