ascoders / react-native-image-viewer

🚀 tiny & fast lib for react native image viewer pan and zoom
MIT License
2.44k stars 578 forks source link

How to change the color position of the top page number #378

Open housan-eng opened 4 years ago

housan-eng commented 4 years ago

How to change the color position of the top page number

nikhil3010 commented 4 years ago

same issue

desarrollospyro commented 4 years ago

+1

MtWay commented 4 years ago

+1

MohammadAzimi commented 3 years ago

I did it by renderIndicator prop like this

renderIndicator={(currentShowIndex, total)=> <Indicator {...{currentShowIndex, total}}/>}

and this is my Indicator component with my own styles

const Indicator = ({currentShowIndex, total}) => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>{`${currentShowIndex} / ${total}`}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute', // <-- absolute postion is important and needed
        alignSelf: 'center', 
        marginTop: 32, 
    },
    text: {
        color: Colors.White,
        fontSize: 20, 
        fontFamily: Fonts.Bold
    }
})

And here https://github.com/ascoders/react-native-image-viewer/issues/372#issuecomment-647103609