[question] Not able to add view behind the dots

[ShivamJoker]

💬 Question

Is there any way I can add my custom view or element behind the dots, I tried using zIndex and elevation it didn't work.

I would be thankful if you could help

[kristerkari]

@ShivamJoker could you please provide some kind of code example of what you are doing exactly?

[ShivamJoker]

Sure here it is

const Onboarding = ({navigation}: Props) => {
  return (
    <ScrollView>
      <Carousel
        mergeStyles={true}
        containerStyle={{height: 500}}
        showsControls={false}
        dotsContainerStyle={{elevation: 100}}
        dotStyle={{
          backgroundColor: Color.RED_300,
          position: 'relative',
          elevation: 100,
        }}
        activeDotStyle={{backgroundColor: Color.RED_500}}
      >
        {imageList.map((img, idx) => (
          <FastImage
            style={style.coverImg}
            key={idx}
            source={img}
            resizeMode="cover"
          />
        ))}
      </Carousel>
      <LinearGradient
        style={style.gradient}
        colors={['#19194000', '#181727']}
      />
      <View style={style.footer}>
        <PrimaryButton
          onPress={() => navigation.push('Main')}
          label="Continue with email"
        />
        <BaseText text="Or signin up with" mv={24} />
        <Link style={{flexDirection: 'row'}} to="/Sign In">
          <BaseText variant="sm" text="Already have an account? " />
          <BaseText text="Sign in" />
        </Link>
      </View>
    </ScrollView>
  );
};

export default Onboarding;

const style = StyleSheet.create({
  footer: {
    margin: 24,
    alignItems: 'center',
  },
  coverImg: {
    width: '100%',
    height: 500,
    position: 'absolute',
    zIndex: -10,
  },
  gradient: {
    width: '100%',
    height: 160,
    position: 'absolute',
    top: 500 - 160,
    elevation: 0,
  },
});

I want the dots to come above the gradient I made