Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
getumangon opened this issue Jul 29, 2020 · 0 comments
Open

Comments

@getumangon
Copy link

getumangon commented Jul 29, 2020

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,
    }
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant