ldn0x7dc / react-native-view-transformer

A pure JavaScript RN component that makes ANY views transformable using gestures like pinch, double tap or pull.
135 stars 143 forks source link

For position: 'absolute' in android with multiple views is not working #33

Open getumangon opened 4 years ago

getumangon commented 4 years ago

I want to make view as floating view over camera view. I am showing view over camera by doing position: 'absolute'.

But It's not working.

Please suggest me where should I apply the position: 'absolute' to work it properly.

Here's my code:

class ViewTransformerScreen extends Component {

    render() {
        return (
            <View style={styles.container}>
                <ViewTransformer
                    enableTransform
                    enableScale
                    enableTranslate
                    style={{ flex: 1, **position: 'absolute'** }}
                >
                    <AnyView />
                </ViewTransformer>
            </View>
        );
    }
}
class AnyView extends Component {
    render() {
        return (
            <View style={styles.containerMain}>
                <TouchableOpacity style={{ borderColor: 'black', borderWidth: 1 }}>
                    <Text style={styles.welcome}>
                        Press Me! Won't capture children's press.
                    </Text>
                </TouchableOpacity>
                <View
                    style={{ height: 120, backgroundColor: '#efefef', alignItems: 'center', justifyContent: 'center', borderColor: 'black', borderWidth: 1 }}
                    onStartShouldSetResponder={() => true}
                    onResponderTerminationRequest={() => false}
                >
                    <Text style={styles.welcome}>
                        Scroll Me! Won't capture children's scroll if children don't allow.
                    </Text>
                </View>

                <Image
                    style={{ width: 300, height: 200 }}
                    source={{ uri: 'https://raw.githubusercontent.com/yoaicom/react-native-demo/res/res/dany%20game%20of%20thrones.jpg' }}
                    resizeMode="contain"
                />
                <View
                    style={{ flexDirection: 'row' }}
                >
                    <Image
                        style={{ width: 150, height: 100 }}
                        source={{ uri: 'https://raw.githubusercontent.com/yoaicom/react-native-demo/res/res/dany%20game%20of%20thrones.jpg' }}
                        resizeMode="contain"
                    />
                    <Image
                        style={{ width: 150, height: 100 }}
                        source={{ uri: 'https://raw.githubusercontent.com/yoaicom/react-native-demo/res/res/dany%20game%20of%20thrones.jpg' }}
                        resizeMode="contain"
                    />

                </View>
                <Text style={styles.instructions}>
                    Just wrap your views in ViewTransformer.
                </Text>
                <Text style={styles.instructions}>
                    Try pinch, double tap or pull.
                </Text>
            </View>
        );
    }
}

export default ViewTransformerScreen;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.red,
    },
    containerMain: {
        height: 200,
        backgroundColor: colors.white,
        shadowColor: colors.black,
        shadowOffset: { width: 5, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 5,
        margin: 20,
        elevation: 10
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    }
})