For position: 'absolute' in android with multiple views is not working
getumangon opened this issue · 0 comments
getumangon commented
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,
}
})