У меня есть тег TouchableOpactity
внутри тега ImageBackground
, который отлично работает с iOS, но свойство bordeRadius не работает на Android для тега TouchableOpactity
.
import React, { Component } from "react";
import {
Text,
StyleSheet,
TextInput,
TouchableOpacity,
TouchableHighlight,
ImageBackground,
SafeAreaView,
Dimensions,
StatusBar
} from "react-native";
import NetInfo from "@react-native-community/netinfo";
import {appColor} from '../../Utils/Colors';
import {MOBILE_NUMBER_HINT,VERIFY_OTP, NO_INTERNET} from '../../Utils/Strings';
import BaseUrl from '../../Utils/ApiClient';
import { TextInputLayout } from "rn-textinputlayout";
import {S} from '../../Utils/Dimen';
import {button} from '../../customComponent/GlobalStyleSheet';
import AsyncStorage from "@react-native-community/async-storage";
import { USER_NAME } from "../../Utils/AsynStorageKey";
export default class ForgotPassword extends Component {
constructor(props) {
super(props);
this.state = {
isConnected: false,
phoneNumber: null,
forgotPassword: ''
}
}
componentDidMount = async () => {
await NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange)
}
handleConnectionChange = async (isConnected) => {
await this.setState({isConnected});
}
forgotPassWord = () => {
if(this.state.phoneNumber !== null || this.state.phoneNumber === '') {
AsyncStorage.setItem(USER_NAME, this.state.phoneNumber)
if(this.state.isConnected) {
let data = {
method: 'POST',
credentials: 'same-origin',
mode: 'same-origin',
body: JSON.stringify({
'mobileNumber': this.state.phoneNumber,
}),
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
}
fetch(BaseUrl + 'resendOtp', data)
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson)
this.props.navigation.navigate('OtpVerification',{forgotPassword: 'Y'})
})
.catch((error) => {
console.log(error)
})
} else {
alert(NO_INTERNET)
}
} else {
alert('Phone number is mandatory')
}
}
render() {
return (
<ImageBackground
source={require('../../assets/app_background.jpg')}
style={{flex:1, backgroundColor: '#fff'}}>
<StatusBar
barStyle="light-content"
backgroundColor={appColor}
/>
<SafeAreaView
style={{width: Dimensions.get('window').width}}>
<TextInputLayout
hintColor={appColor}
focusColor={appColor}
style={styles.inputLayout}>
<TextInput
style={styles.textInput}
placeholder={MOBILE_NUMBER_HINT}
onChangeText={(phoneNumber)=>{this.setState({phoneNumber})}}
keyboardType={'number-pad'}
returnKeyType='done' />
</TextInputLayout>
<TouchableOpacity
style={styles.roundedButton}
onPress={this.forgotPassWord}
>
<Text style={styles.text}>{VERIFY_OTP}</Text>
</TouchableOpacity>
</SafeAreaView>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
},
textInput: {
fontSize: 16,
height:40
},
inputLayout: {
marginTop: 8,
marginHorizontal:16,
},
roundedButton: {
backgroundColor: appColor,
alignSelf: 'center',
padding: 8,
marginTop: 30,
width:'40%',
borderRadius: 35
},
text: {
fontSize: S,
color: 'white',
textAlign:'center'
}
});