I want to make horizontal ScrollView with 6 TouchableOpacity element's; onPress they would change some redux state, and then, chenge they own style, how to force list KEEP position on rerender? Now if I press after some scrolling it goes back to the start
I want this look something like category choosing in Play Market, but without centering, it just need keeps the position
<ScrollView
style={{ height: 50, width: '100%' }}
contentContainerStyle={{ alignItems: 'center' }}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<TouchableOpacity
style={categoryNumber === 0 ? styles.BtnActive : styles.Btn}
onPress={() => dispatch(setCategoryNumber(0))}>
<Text style={categoryNumber === 0 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 1</Text>
</TouchableOpacity>
<TouchableOpacity
style={categoryNumber === 1 ? styles.BtnActive : styles.Btn}
onPress={() => dispatch(setCategoryNumber(1))}>
<Text style={categoryNumber === 1 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 2</Text>
</TouchableOpacity>
<TouchableOpacity
style={categoryNumber === 2 ? styles.BtnActive : styles.Btn}
onPress={() => dispatch(setCategoryNumber(2))}>
<Text style={categoryNumber === 2 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 3</Text>
</TouchableOpacity>
<TouchableOpacity
style={categoryNumber === 3 ? styles.BtnActive : styles.Btn}
onPress={() => dispatch(setCategoryNumber(3))}>
<Text style={categoryNumber === 3 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 4</Text>
</TouchableOpacity>
<TouchableOpacity
style={categoryNumber === 4 ? styles.BtnActive : styles.Btn}
onPress={() => {dispatch(setCategoryNumber(4))}}>
<Text style={categoryNumber === 4 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 5</Text>
</TouchableOpacity>
<TouchableOpacity
style={categoryNumber === 5 ? styles.BtnActive : styles.Btn}
onPress={() => {dispatch(setCategoryNumber(5))}}>
<Text style={categoryNumber === 5 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 6</Text>
</TouchableOpacity>
</ScrollView>
const styles = StyleSheet.create({
Btn: {
height: 40,
backgroundColor: '#F1F5FE',
paddingHorizontal: 10,
justifyContent: 'center',
borderRadius: 12,
marginHorizontal: 4
},
BtnText: {
color: '#000'
},
BtnActive: {
height: 40,
backgroundColor: '#336FEE',
paddingHorizontal: 10,
justifyContent: 'center',
borderRadius: 12,
marginHorizontal: 4
},
BtnTextActive: {
color: '#fff'
}
})
Add unique keys to the components of the ScrollView
Example:
<TouchableOpacity
key={'some-unique-id'}
style={categoryNumber === 0 ? styles.BtnActive : styles.Btn}
onPress={() => dispatch(setCategoryNumber(0))}>
<Text style={categoryNumber === 0 ? styles.BtnTextActive : styles.BtnText}>
ITEM_NAME 1
</Text>
</TouchableOpacity>
Tip: Try to use loops instead of hard writing things in ScrollView