FavoriteIcon is under main View in Android

[nimabk82]

[octopitus]

Hi @nimamyscreen, try to add zIndex = 1 to style of fav icon or disable backdrop or move the SlidingUpPanel component on top of main view.

Let me update the demo.

[nimabk82]

this is my code, but still not working

import React from 'react'
import {
    AppRegistry,
    Text,
    View,
    Dimensions,
    Image,
    Animated
} from 'react-native'

import SlidingUpPanel from 'rn-sliding-up-panel'

const {height} = Dimensions.get('window');

const styles = {
    container: {
        flex: 1,
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center'
    },
    panel: {
        flex: 1,
        backgroundColor: 'white',
        position: 'relative'
    },
    panelHeader: {
        height: 150,
        backgroundColor: '#b197fc',
        alignItems: 'center',
        justifyContent: 'center'
    },
    favoriteIcon: {
        position: 'absolute',
        top: -24,
        right: 24,
        backgroundColor: '#2b8a3e',
        width: 48,
        height: 48,
        padding: 8,
        borderRadius: 24,
        zIndex: 1
    }
}

class SlidingUp extends React.Component {
    static defaultProps = {
        draggableRange: {
            top: height / 1.75,
            bottom: 150
        }
    };

    _draggedValue = new Animated.Value(-150);

    constructor(props) {
        super(props);

        this._renderFavoriteIcon = this._renderFavoriteIcon.bind(this)
        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));

    }

    onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
        if (event.type == 'NavBarButtonPress') { // this is the event type for button presses
            if (event.id == 'cancel') { // this is the same id field from the static navigatorButtons definition
                this.props.navigator.dismissModal()            }
        }
    }

    _renderFavoriteIcon() {
        const {top, bottom} = this.props.draggableRange;
        const draggedValue = this._draggedValue.interpolate({
            inputRange: [-(top + bottom) / 2, -bottom],
            outputRange: [0, 1],
            extrapolate: 'clamp'
        });

        const transform = [{scale: draggedValue}];

        return (
            <Animated.View style={[styles.favoriteIcon, {transform}]}>
                <Image source={require('../../../img/error.png')} style={{width: 32, height: 32}} />
            </Animated.View>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>Hello world</Text>
                <SlidingUpPanel
                    visible
                    showBackdrop={true}
                    ref={(c) => {this._panel = c}}
                    draggableRange={this.props.draggableRange}
                    onDrag={(v) => this._draggedValue.setValue(v)}>
                    <View style={styles.panel}>
                        {this._renderFavoriteIcon()}
                        <View style={styles.panelHeader}>
                            <Text style={{color: '#FFF'}}>Bottom Sheet Peek</Text>
                        </View>
                        <View style={styles.container}>
                            <Text>Bottom Sheet Content</Text>
                        </View>
                    </View>
                </SlidingUpPanel>
            </View>
        )
    }
}
export default SlidingUp;

[octopitus]

@nimamyscreen Currently React Native on Android does not support overflow visible. See: facebook/react-native#6802