Androw with in androw?

[Yash Vaghela]

i have main component and have to set shadow in that.
and in that component i have another button i have to apply shadow in that also

but then the TouchableOpacity misbahave.can't click proper on it

code:

<Androw style={Platform.OS == 'android'?styles.shadow:null}> <View style={{width:500,height:500,backgroundColor:'#FCFCFC',justifyContent:'center',alignItems:'center'}}> <Androw style={Platform.OS == 'android'?styles.shadow:null}> <TouchableOpacity style={{width:50,height:50,backgroundColor:'blue'}}> <Text>Click</Text> </TouchableOpacity></Androw> </View> </Androw>

style:

shadow:{ shadowColor:'red', shadowOpacity:0.5, shadowRadius: 10 , shadowOffset:{ width: 0, height: 10 },

here it is

[Yash Vaghela]

Are you facing this issue??

[Olof Larsson]

I have not tried to nest Androw components. But each re-render of the button shadow might also trigger a re render of the background shadow. What you can try is to un-nest the Androw views and use a view as background instead. Like:

<View style={styles.fullView}>

  <Androw style={Platform.OS == 'android'?styles.shadow:null}>
    <View style={{width:'100%',height:'100%',backgroundColor:'#FCFCFC',position:'absolute',zIndex:1}}> 
    </View>
  </Androw>

  <View style={{width:500, height:500, justifyContent:'center',alignItems:'center',zIndex:2}}
    <Androw style={Platform.OS == 'android'?styles.shadow:null}>
      <TouchableOpacity style={{width:50,height:50,backgroundColor:'blue'}}>
        <Text>Click</Text> 
      </TouchableOpacity>
    </Androw>
  </View>
</View>

[Yash Vaghela]

didn't understand what you trying to say...
as showed in GIF i have parent view which also contain shadow and inner view has also ..but touch issue
i want to apply shadow on parent view also and child view also..

[Yash Vaghela]

`import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TouchableOpacity} from 'react-native';
import Androw from 'react-native-androw';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';

const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});

export default class App extends Component {
render() {
return (

<View style={{width:'90%',height:200,backgroundColor:'red',padding:10,justifyContent:'center'}}>

<View style={{height:50,width:'90%',backgroundColor:'white'}}>
<TouchableOpacity style={{width:'10%',backgroundColor:'green',height:50}}>
click





);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
shadow:{
height:50,
shadowColor:'#76a6ef',
shadowOpacity:1,
shadowRadius: 50 ,
shadowOffset:{
width: 0,
height: 10
},
},
registerText: {
//fontFamily: theme.appFontBold,
color: '#dcdee5',
fontSize:14,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
registerButton: {
height: 48,
width: 50,
borderRadius: 8,
backgroundColor:'white',
justifyContent: 'center',
alignItems: 'center',
...Platform.select({
//ios: theme.shadow,
android: {
// borderColor: '#76a6ef',
// borderWidth: 0.5,
}
})
},

});`

[Yash Vaghela]

here is my code..
please try to run this...
there is a CLICK button is not possible to click where it is..it's clicked when you click outside of button

Please help me through this..
i implemented shadow in whole project ..now Touchable opacity not working properly

[Olof Larsson]

Androw creates a bitmap representation of the view, which is not optimal, but it works. So the rest of the children's is only an image and therefore not components in that meaning. The library is still under development so i will look in to this issue. Meanwhile you can separate the components inside the Androw view.

<View style={styles.container}>
	<View style={{width:'90%',height:200,backgroundColor:'red',padding:10,justifyContent:'center'}}>

		<Androw style={[styles.shadow, {flexDirection: 'row'}]} >
			<TouchableOpacity style={{width:'10%',backgroundColor:'green',height:50}}>
				<Text>click</Text>
			</TouchableOpacity>
			<View style={{height:50,width:'90%',backgroundColor:'white', }}></View>
		</Androw>
	</View>	
</View>

[Yash Vaghela]

Androw creates a bitmap representation of the view, which is not optimal, but it works. So the rest of the children's is only an image and therefore not components in that meaning. The library is still under development so i will look in to this issue. Meanwhile you can separate the components inside the Androw view.

<View style={styles.container}>
	<View style={{width:'90%',height:200,backgroundColor:'red',padding:10,justifyContent:'center'}}>

		<Androw style={[styles.shadow, {flexDirection: 'row'}]} >
			<TouchableOpacity style={{width:'10%',backgroundColor:'green',height:50}}>
				<Text>click</Text>
			</TouchableOpacity>
			<View style={{height:50,width:'90%',backgroundColor:'white', }}></View>
		</Androw>
	</View>	
</View>

is your touchable working properly in this??

[Olof Larsson]

Yes it does.

[Yash Vaghela]

Yes it does.

can you please share you whole file?

[Olof Larsson]

import React, { Component } from 'react';
import {
	StyleSheet,
	Text,
	View,
	TouchableOpacity,
} from 'react-native';
import Androw from 'react-native-androw';

export default class App extends Component {
	render() {
		return (
			<View style={styles.container}>
				<View style={{width:'90%',height:200,backgroundColor:'red',padding:10,justifyContent:'center'}}>

					<Androw style={[styles.shadow, {flexDirection: 'row'}]} >
						<TouchableOpacity style={{width:'10%',backgroundColor:'green',height:50}}>
							<Text>click</Text>
						</TouchableOpacity>
						<View style={{height:50,width:'90%',backgroundColor:'white', }}></View>
					</Androw>
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#F5FCFF',
	},
	shadow:{
		height:50,
		shadowColor:'#76a6ef',
		shadowOpacity:1,
		shadowRadius: 50 ,
		shadowOffset:{
			width: 0,
			height: 10
		},
	},
});