react-native-gesture-handler#BorderlessButton JavaScript Examples
The following examples show how to use
react-native-gesture-handler#BorderlessButton.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: CameraView.js From WhatsApp-Clone with MIT License | 4 votes |
|
CameraView = ({navigation, onScanQrCode, isScanCode}) => {
var [state, dispatch] = useReducer(statusReducer, statusState);
var {loading, isFlashEnabled, isFrontCam} = state;
const [imageClicked, setImageClicked] = useState('');
var cameraRef = useRef('');
const LoadingView = () => <LoadingComponent />;
function performAction(camera) {
if (isScanCode) {
onScanQrCode();
} else {
takePicture(camera);
}
}
const takePicture = async function(camera) {
const options = {
// quality: 0.5,
base64: true,
quality: 0.6,
orientation: RNCamera.Constants.Orientation.auto,
pauseAfterCapture: true,
fixOrientation: true,
};
const data = await cameraRef.current.takePictureAsync(options);
// cameraRef.current.pausePreview();
// console.log(data.uri);
setImageClicked(data.uri);
};
function toggleViews(type) {
switch (type) {
case TOGGLE_CAMERA:
dispatch({type: TOGGLE_CAMERA, payload: !isFrontCam});
break;
case TOGGLE_FLASH:
dispatch({type: TOGGLE_FLASH, payload: !isFlashEnabled});
break;
}
}
return (
<Root>
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<RNCamera
autoFocus='on'
// autoFocusPointOfInterest
ref={cameraRef}
useCamera2Api
onTouchStart={Keyboard.dismiss}
style={styles.preview}
type={
isFrontCam
? RNCamera.Constants.Type.front
: RNCamera.Constants.Type.back
}
flashMode={
isFlashEnabled
? RNCamera.Constants.FlashMode.on
: RNCamera.Constants.FlashMode.off
}
barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
onBarCodeRead={result => {
if (isScanCode) {
// console.log(result.data);
onScanQrCode(result.data)
}
}}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
androidRecordAudioPermissionOptions={{
title: 'Permission to use audio recording',
message: 'We need your permission to use your audio',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}>
{({camera, status, recordAudioPermissionStatus}) => {
if (status !== 'READY') return <LoadingView />;
if (Platform.OS === 'ios') {
return (
<KeyboardAvoidingView
behavior={'padding'}
onTouchStart={Keyboard.dismiss}
style={{width: '100%', height: '100%'}}>
{getMainView(camera)}
</KeyboardAvoidingView>
);
} else {
return getMainView(camera);
}
}}
</RNCamera>
</View>
</SafeAreaView>
</Root>
);
function getMainView(camera) {
return (
<View style={{width: '100%', height: '100%'}}>
<View style={styles.headerView}>
<BorderlessButton
style={styles.buttonStyle}
onPress={() => navigation.goBack()}>
<Icon
name={Platform.OS === 'ios' ? 'ios-arrow-back' : 'md-arrow-back'}
type="Ionicons"
style={styles.leftIcon}
/>
</BorderlessButton>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
}}>
<BorderlessButton
style={styles.buttonStyle}
onPress={() => toggleViews(TOGGLE_CAMERA)}>
<Icon
name={
Platform.OS === 'ios'
? isFrontCam
? 'md-reverse-camera'
: 'md-reverse-camera'
: isFrontCam
? 'md-reverse-camera'
: 'md-reverse-camera'
}
type="Ionicons"
style={styles.leftIcon}
/>
</BorderlessButton>
<BorderlessButton
style={styles.buttonStyle}
onPress={() => toggleViews(TOGGLE_FLASH)}>
<Icon
name={
Platform.OS === 'ios'
? isFlashEnabled
? 'ios-flash'
: 'ios-flash-off'
: isFlashEnabled
? 'md-flash'
: 'md-flash-off'
}
type="Ionicons"
style={styles.leftIcon}
/>
</BorderlessButton>
</View>
</View>
{imageClicked === '' && !isScanCode && (
<Button
rounded
onPress={() => performAction(camera)}
style={styles.capture}>
<Icon
name="camera"
type="MaterialCommunityIcons"
style={styles.sendIcon}
/>
{/* <Text style={{fontSize: 14}}> SNAP </Text> */}
</Button>
)}
{imageClicked != '' && (
<View style={styles.bottomView}>
<ChatTextInput
isStatus
onSendMessage={status => {
dispatch({type: LOADING, payload: true});
uploadStatus(imageClicked, status, navigation, dispatch);
}}
onResetClick={() => {
// cameraRef.current.resumePreview();
setImageClicked('');
}}
/>
</View>
)}
{loading && <LoadingView />}
</View>
);
}
}
Example #2
| Source File: LoginScreen.js From WhatsApp-Clone with MIT License | 4 votes |
|
LoginScreen = ({navigation}) => {
const [userName, setUserName] = useState('');
const [mobile, setMobile] = useState('');
const [isLoading, setLoading] = useState(false);
useEffect(() => {
getLocalData(constants.USER_ID)
.then(userID => {
console.log('Login userID => ', userID);
if (userID && userID != null && userID != '') {
navigation.dispatch(StackActions.replace(NAV_TYPES.HOME_SCREEN));
}
})
.catch(err => {
console.log('Login Error => ', err);
});
}, []);
const onLoginClick = () => {
if (userName === '') {
showToast({text: 'Enter your Name', type: 'danger'});
} else if (mobile === '') {
showToast({text: 'Enter your Mobile Number', type: 'danger'});
} else {
setLoading(!isLoading);
loginUser(getLoginModel(userName, mobile))
.then(res => {
console.log('LOGIN RESPONSE => ' + JSON.stringify(res));
if (res.data.success) {
setLoading(isLoading);
console.log('TOKEN : ', res.headers.token);
setUserName('');
setMobile('');
console.log('LOGIN RESPONSE => ' + JSON.stringify(res));
storeLocalData(constants.ACCESS_TOKEN, res.headers.token);
storeLocalData(constants.USER_ID, res.data.id);
storeLocalData(constants.USER_NAME, userName);
navigation.navigate(NAV_TYPES.HOME_SCREEN, {});
}
})
.catch(error => {
console.log('LOGIN ERROR ', error);
});
}
};
const onSignUpClick = () => {
navigation.navigate(NAV_TYPES.REGISTER, {});
};
return (
<SafeAreaView style={container}>
{isLoading && <LoadingComponent />}
{/* {!isLoading && ( */}
<Root style={[container, {flexDirection: 'column'}]}>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.keyboardView}>
<View style={styles.headerView}>
<Icon type="FontAwesome" name="whatsapp" style={styles.logoStyle} />
<_Text style={styles.logoTextStyle}>{constants.APP_NAME}</_Text>
</View>
<ScrollView
keyboardShouldPersistTaps="handled"
contentContainerStyle={{
flex: 1,
justifyContent: 'center',
}}>
<View style={styles.contentView}>
<View style={{flexDirection: 'column'}}>
<_Text description style={[poppinsRegular, styles.labelStyle]}>
Enter Name
</_Text>
<_TextInput
value={userName}
inputStyle={[poppinsMedium, styles.inputStyle]}
floatingLabel={false}
keyboardType={'default'}
containerStyle={{width: '100%', marginLeft: 0}}
onChangeText={data => {
setUserName(data.value);
}}
/>
<_Text description style={[poppinsRegular, styles.labelStyle]}>
Mobile Number
</_Text>
<_TextInput
value={mobile}
inputStyle={[poppinsMedium, styles.inputStyle]}
floatingLabel={false}
keyboardType={'numeric'}
containerStyle={{width: '100%', marginLeft: 0}}
onChangeText={data => {
setMobile(data.value);
}}
/>
</View>
<View style={styles.buttonLoginView}>
<Button onPress={() => onLoginClick()} style={styles.login}>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>Login</Text>
</Button>
<BorderlessButton
onPress={() => onSignUpClick()}
style={styles.buttonSignupView}>
<Text style={styles.signup}>Sign Up</Text>
</BorderlessButton>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</Root>
{/* )} */}
</SafeAreaView>
);
}
Example #3
| Source File: RegisterScreen.js From WhatsApp-Clone with MIT License | 4 votes |
|
RegisterScreen = ({navigation}) => {
const [countryCode, setCountryCode] = useState('');
const [country, setCountry] = useState('');
const [userName, setUserName] = useState('');
const [mobile, setMobile] = useState('');
const [isLoading, setLoading] = useState(false);
useEffect(() => {
getLocalData(constants.USER_ID)
.then(userID => {
console.log('Login userID => ', userID);
if (userID && userID != null && userID != '') {
navigation.dispatch(StackActions.replace(NAV_TYPES.HOME_SCREEN));
}
})
.catch(err => {
console.log('Login Error => ', err);
});
}, []);
const onSelect = country => {
console.log(country);
setCountryCode(country.cca2);
setCountry(country);
};
const onSignUpClick = () => {
if (country === '') {
showToast({text: 'Select your Country', type: 'danger'});
} else if (userName === '') {
showToast({text: 'Enter your Name', type: 'danger'});
} else if (mobile === '') {
showToast({text: 'Enter your Mobile Number', type: 'danger'});
} else {
setLoading(!isLoading);
loginUser(getLoginModel(userName, mobile))
.then(res => {
setLoading(isLoading);
console.log('TOKEN : ', res.headers.token);
setUserName('');
setMobile('');
console.log('LOGIN RESPONSE => ' + JSON.stringify(res));
if (res.data.success) {
storeLocalData(constants.ACCESS_TOKEN, res.headers.token);
storeLocalData(constants.USER_ID, res.data.id);
storeLocalData(constants.USER_NAME, userName);
navigation.navigate(NAV_TYPES.HOME_SCREEN, {});
}
})
.catch(error => {
console.log('LOGIN ERROR ', error);
});
}
};
const onLoginClick = () => {
navigation && navigation.goBack();
};
return (
<SafeAreaView style={container}>
{isLoading && <LoadingComponent />}
{/* {!isLoading && ( */}
<Root style={[container, {flexDirection: 'column'}]}>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.keyboardView}>
<View style={styles.headerView}>
<Icon type="FontAwesome" name="whatsapp" style={styles.logoStyle} />
<_Text style={styles.logoTextStyle}>{constants.APP_NAME}</_Text>
</View>
<ScrollView
keyboardShouldPersistTaps="handled"
contentContainerStyle={{
flex: 1,
justifyContent: 'center',
}}>
<View style={styles.contentView}>
<_Text description style={[poppinsRegular, styles.inputStyle]}>
Country
</_Text>
<View style={{flexDirection: 'column'}}>
{/* <_TextInput editable={true} style={{width:'20%'}} /> */}
<CountryPicker
containerButtonStyle={{
height: 40,
marginTop: 5,
justifyContent: 'center',
}}
countryCode={countryCode}
withCountryNameButton={true}
visible={false}
withFlag={true}
withCloseButton={true}
withAlphaFilter={true}
withCallingCode={true}
// withCurrency={true}
withEmoji={true}
withCountryNameButton={true}
// withCurrencyButton={true}
// withCallingCodeButton={true}
withFilter={true}
withModal={true}
onSelect={onSelect}
/>
<View style={{height: '3%', backgroundColor: GREEN}} />
</View>
<View style={{flexDirection: 'column', marginTop: '-4%'}}>
<_Text description style={[poppinsRegular, styles.labelStyle]}>
Enter Name
</_Text>
<_TextInput
value={userName}
inputStyle={[poppinsMedium, styles.inputStyle]}
floatingLabel={false}
keyboardType={'default'}
containerStyle={{width: '100%', marginLeft: 0}}
onChangeText={data => {
setUserName(data.value);
}}
/>
<_Text description style={[poppinsRegular, styles.labelStyle]}>
Mobile Number
</_Text>
<_TextInput
value={mobile}
inputStyle={[poppinsMedium, styles.inputStyle]}
floatingLabel={false}
keyboardType={'numeric'}
containerStyle={{width: '100%', marginLeft: 0}}
onChangeText={data => {
setMobile(data.value);
}}
/>
</View>
<View style={styles.buttonLoginView}>
<Button onPress={() => onSignUpClick()} style={styles.login}>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>
Sign Up
</Text>
</Button>
<BorderlessButton
onPress={() => onLoginClick()}
style={styles.buttonSignupView}>
<Text style={styles.signup}>Login</Text>
</BorderlessButton>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</Root>
</SafeAreaView>
);
}
