How can fix Cart Button on Home Screen while scrolling

Question

I was trying to make a cart button on home screen and I want cart always stay on same position but when I'm scrolling cart button also moving up and down. But I don't want that. I have tried Position: 'fixed'; but it's showing error in react native.


        <View style={{
flexDirection: 'column-reverse', position: 'absolute', marginTop: 90, zIndex: 999, alignSelf: 'flex-end'}}>
          <TouchableOpacity style={styles.carticon} onPress={()=> navigation.navigate('AddtoCart')}>
            <Image
              style={styles.personicon}
              source={require('../assests/img/carticon.png')}></Image>
          </TouchableOpacity>
        </View>

const styles = StyleSheet.create({
  circleimg: {
    width: 50,
    height: 50,
  },
  carticon: {
    width: 70,
    height: 70,
    flex: 0,
    padding: 2,
    marginLeft: 20,
    flexDirection: 'row-reverse',
    borderRadius: 150 / 2,
    backgroundColor: '#fff',
    alignItems: 'center',
    alignSelf: 'flex-end',
    justifyContent: 'center',
  },
})

score 1 · Answer 1 · answered Jun 30 '21 at 13:38

You could use a custom header with react native stack navigator as the header will stay fixed as you scroll:

<Stack.Navigator>
    <Stack.Screen
        name="Home"
        component={Home}
        options={({navigation}) => ({
            title: '',
            headerRight: () => <HeaderRight navigation={navigation} />,
        })}
    />
</Stack.Navigator>

And then placing the cart button in the custom header:

class HeaderRight extends React.Component {
  render() {
    return (
      <View>
          <TouchableOpacity style={styles.carticon} onPress={()=> this.props.navigation.navigate('AddtoCart')}>
            <Image
              style={styles.personicon}
              source={require('../assests/img/carticon.png')}></Image>
          </TouchableOpacity>
      </View>
    );
  }
}

How can fix Cart Button on Home Screen while scrolling

1 Answers1