Aspect of undefined in diferent file React Native - ios

Iam trying to access camera but i get this error. I try to do all tutorial that people have show in other pages to make it work but i didn't have the same loki.
I enter at this file: \myproject\node_modules\lottie-ios\Example-Swift\Pods\Target Support Files\lottie-ios\Info.plist and add this:
<key>NSCameraUsageDescription</key>
<string>Feetit Would you like to access Camera</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Feetit Would you like to access Photos</string>
Before that I install this:
npm install react-native-camera --save
npm install react-native link react-native-camera
After that I try this code for make Camera works:
import React, {Component} from 'react';
import Camera from 'react-native-camera';
import {View, TouchableHighlight, Text, StyleSheet} from 'react-native';
export default class CameraAcess extends Component {
takePicture() {
const options = {};
//options.location = ...
this.camera.capture({metadata: options})
.then((data) => console.log(data))
.catch(err => console.error(err));
}
onBarCodeRead(e) {
console.log(
"Barcode Found!", "Type: " + e.type + "\nData: " + e.data
);
}
render() {
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
onBarCodeRead={this.onBarCodeRead.bind(this)}
style={styles.preview}>
<TouchableHighlight style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]
<Text>Click me</Text>
</TouchableHighlight>
</Camera>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: '#000',
padding: 10,
margin: 40
}
});
I get this ERROR 'Can not read proprety 'Aspect' of undefined. The file of this error is other one, is Camera.js. Could Someone please tell me what i have to do to make it Work?

I looked over the docs and did not see this variable on the camera required however i did see in an example I built that I set this variable on the Camera. See if this helps as it may not start with a default value.
aspect={Camera.constants.Aspect.fill}
Change to your preference.

If you are facing this problem in iOS then
Remove the previously-installed react-native-camera pod.
$ cd ios
$ rm -rf Pods/
$ pod install
And then manually link
as mentioned in librarary readme
Plese check the permissions also which are required for camera.

Related

Open Measure App (iOS) in your React Native App using a button [Expo]

I am trying to open the Measure iPhone App inside my react native app. I have tried to use linking but as mentioned in this stackoverflow question, Measure does not support URL scheme or Deep Linking. Is there any other way to open the Measure App inside or be redirected to Measure App from my App in react native?
import React, { Component } from 'react';
import { Button, Linking, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Button
title="Open Measure App"
onPress={this._handleOpenWithLinking}
style={styles.button}
/>
</View>
);
}
_handleOpenWithLinking = () => {
// Should open the Measure App
// This does not work as mentioned - Linking.openURL("measure://")
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
button: {
marginVertical: 10,
},
});

Open react native expo app external links outside the app

I am using the following code. Apple is not pleased that all external links are opening within app. How should I modify my code below so that external links open in outisde app safari instead of within app safari.
My App.js is as following:
import { StatusBar } from 'expo-status-bar';
import React, { useState, useRef } from 'react'
import {ActivityIndicator, Platform, TouchableOpacity, Text, SafeAreaView, StyleSheet, View} from "react-native";
import { WebView } from 'react-native-webview';
import { NavigationContainer } from '#react-navigation/native';
import { Ionicons } from '#expo/vector-icons'
import Constants from 'expo-constants'
const App = () => {
const [canGoBack, setCanGoBack] = useState(false)
const [canGoForward, setCanGoForward] = useState(false)
const [currentUrl, setCurrentUrl] = useState('')
const webviewRef = useRef(null)
backButtonHandler = () => {
if (webviewRef.current) webviewRef.current.goBack()
}
frontButtonHandler = () => {
if (webviewRef.current) webviewRef.current.goForward()
}
return (
<>
<StatusBar barStyle='dark-content' />
<View style={styles.flexContainer}>
<WebView
userAgent="Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.193 Mobile Safari/537.36"
source={{ uri: 'https://www.google.co.in/search?q=restaurants+nearby&ct=ifl&cad=2:hungry&ei=IWHsX_aDGJK0swXew5HgBw&ved=0ahUKEwi2mN_oyfXtAhUS2qwKHd5hBHwQnRsIDg&rct=j' }}
mixedContentMode = "compatibility"
ref={webviewRef}
onNavigationStateChange={navState => {
setCanGoBack(navState.canGoBack)
setCanGoForward(navState.canGoForward)
setCurrentUrl(navState.url)
}}
/>
<View style={styles.tabBarContainer}>
<TouchableOpacity onPress={backButtonHandler}>
<Ionicons name="ios-arrow-back" size={32} color="white" />
</TouchableOpacity>
<TouchableOpacity onPress={frontButtonHandler}>
<Ionicons name="ios-arrow-forward" size={32} color="white" />
</TouchableOpacity>
</View>
</View>
</>
)
}
const styles = StyleSheet.create({
flexContainer: {
flex: 1,
paddingTop:Constants.statusBarHeight
},
tabBarContainer: {
padding: 10,
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: '#000000'
},
button: {
color: 'white',
fontSize: 20
}
})
export default App
Edit: Can you please provide a modified version of App.js above as I have already read through the various help documentation and codes there.
Expo
you can use expo-web-browser because Apple wants is to have it clearly visible that it is an external URL.
Installation
expo install expo-web-browser
expo-web-browser provides access to the system's web browser and supports handling redirects. On iOS, it uses SFSafariViewController or SFAuthenticationSession, depending on the method you call, and on Android it uses ChromeCustomTabs. As of iOS 11, SFSafariViewController no longer shares cookies with Safari, so if you are using WebBrowser for authentication you will want to use WebBrowser.openAuthSessionAsync, and if you just want to open a webpage (such as your app privacy policy), then use WebBrowser.openBrowserAsync
Usage
https://snack.expo.io/#nomi9995/basic-webbrowser-usage
import React, { useState } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import Constants from 'expo-constants';
export default function App() {
const [result, setResult] = useState(null);
const _handlePressButtonAsync = async () => {
let result = await WebBrowser.openBrowserAsync('https://expo.io');
setResult(result);
};
return (
<View style={styles.container}>
<Button title="Open WebBrowser" onPress={_handlePressButtonAsync} />
<Text>{result && JSON.stringify(result)}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
React Native
you can use the following library react-native-inappbrowser
follow the installation from the github page
import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn'
...
async openLink() {
try {
const url = 'https://www.google.com'
if (await InAppBrowser.isAvailable()) {
const result = await InAppBrowser.open(url, {
// iOS Properties
dismissButtonStyle: 'cancel',
preferredBarTintColor: '#453AA4',
preferredControlTintColor: 'white',
readerMode: false,
animated: true,
modalPresentationStyle: 'overFullScreen',
modalTransitionStyle: 'partialCurl',
modalEnabled: true,
// Android Properties
showTitle: true,
toolbarColor: '#6200EE',
secondaryToolbarColor: 'black',
enableUrlBarHiding: true,
enableDefaultShare: true,
forceCloseOnRedirection: false,
// Specify full animation resource identifier(package:anim/name)
// or only resource name(in case of animation bundled with app).
animations: {
startEnter: 'slide_in_right',
startExit: 'slide_out_left',
endEnter: 'slide_in_left',
endExit: 'slide_out_right'
},
headers: {
'my-custom-header': 'my custom header value'
},
waitForRedirectDelay: 0
})
Alert.alert(JSON.stringify(result))
}
else Linking.openURL(url)
} catch (error) {
Alert.alert(error.message)
}
}
...
you can check the example app here
for expo it becomes little bit complicated please check the related tutorial by Medium
if you want reading mode in ios please refer this link
reader-mode-webview-component-for-react-native
You've embedded a webview. What Apple wants, is to have it clearly visible that it is an external URL.
There is what's called Safari UI View Controller on IOS, and Chrome Custom tabs on Android.
There are a couple of plugins out there, but I liked using this one: https://www.npmjs.com/package/react-native-inappbrowser-reborn

react-native-gesture-handler not working on ios

I have yarn installed react-native-gesture-handler,I then cd'd into ios and pod installed. I then reran the react-native run-ios and still when I swipe nothing happens whatsoever. Im getting zero errors it just doesn't swipe whatsoever. Am i doing something wrong? I have tried to remedy this situation anyway possible and It just doesn't seem to swipe no matter what.
my code is as follows:
import React, {useState} from 'react';
import {
Platform,
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
flatList,
} from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
const styles = StyleSheet.create({
container: {
padding: 20,
flexDirection: 'row',
backgroundColor: '#fff',
justifyContent: 'space-between',
alignItems: 'center',
},
text: {
fontSize: 18,
color: '#69696969',
},
icon: {
height: 30,
tintColor: '#69696969',
...Platform.select({
ios: {
tintColor: 'blue',
},
android: {
tintColor: 'red',
},
}),
},
separator: {
flex: 1,
height: 1,
backgroundColor: 'rgba(0, 0, 0, 0.2)',
},
});
export const Separator = () => <View style={styles.separator} />;
const LeftAction = () => {
<View>
<Text>test</Text>
</View>;
};
const ListItem = ({name, onFavoritePress}) => {
const [isFavorite, setIsFavorite] = useState(false);
let starIcon;
if (isFavorite) {
starIcon = Platform.select({
ios: require('../assets/icons/ios-star.png'),
android: require('../assets/icons/md-star.png'),
});
} else {
starIcon = Platform.select({
ios: require('../assets/icons/ios-star-outline.png'),
android: require('../assets/icons/md-star-outline.png'),
});
}
return (
<Swipeable renderLeftActions={LeftAction}>
<View style={styles.container}>
<Text style={styles.text}>{name}</Text>
{onFavoritePress && (
<TouchableOpacity
onPress={() => setIsFavorite((prevIsFavorite) => !prevIsFavorite)}>
<Image style={styles.icon} resizeMode="contain" source={starIcon} />
</TouchableOpacity>
)}
</View>
</Swipeable>
);
};
export default ListItem;
You need to link RNGH to RN
run react-native link react-native-gesture-handler
if this doesn't work maybe you don't have cocoapads dependencies
to install it
run cd <your-ios-code-directory> && pod install

React-native-camera in Ios not working not appearing

Making a demo for text Recognition with camera using library react-native-camera but camera is not opening
DONE ALL THESE STEPS:
npm install react-native-camera --save
react-native link react-native-camera
Go to node_modules ➜ react-native-camera and add RNCamera.xcodeproj
Expand the RNCamera.xcodeproj ➜ Products folder
In XCode, in the project navigator, select your project. Add libRNCamera.a to your project's Build Phases ➜ Link Binary With
Libraries
Click RNCamera.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of
'Basic').
In the Search Paths section, look for Header Search Paths and make sure it contains both $(SRCROOT)/../../react-native/React and
$(SRCROOT)/../../../React - mark both as recursive
import { RNCamera } from 'react-native-camera';
camerascan(){
console.log("camscan=====")
return(
<RNCamera
ref={ref => {
this.camera = ref;
}}
defaultTouchToFocus
mirrorImage={false}
captureAudio={false}
style={{
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={'We need your permission to use your camera phone'}
>
<View
style={{
height: 56,
backgroundColor: 'transparent',
alignSelf: 'flex-end',
}}
>
<TouchableOpacity onPress={this.takePicture.bind(this)}>
<Text style={styles.capture}> [CAPTURE CARD]</Text>
</TouchableOpacity>
</View>
</RNCamera>
);
}
takePicture = async function() {
console.log("takePicture=====")
if (this.camera) {
// const options = { quality: 0.5, base64: true };
// const data = await this.camera.takePictureAsync(options)
const data = await this.camera.takePictureAsync();
console.warn('takePicture ', data);
// this.detectText(data.base64)
}
};
No error but camera is not opening.
Done gave the runtime permissions for camera
import Permissions from 'react-native-permissions'
componentDidMount()
{
this.determinePermission();
}
determinePermission(){
Permissions.request('camera', { type: 'always' }).then(response => {
this.setState({ locationPermission: response })
})
}

React native tab view

I am building my first react-native app, and Implementing tabs using react-native-tabview. Stuck with the error :
"TypeError: undefined is not an object (evaluating '_this.props.navigationState.routes.length').
This is a screenshot of error I'm getting.
import * as React from 'react';
import {
Platform, StyleSheet, Text, View, Dimensions, StatusBar, FlatList, ImageBackground, TextInput
} from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
export default class App extends React.Component {
state = {
index: 0,
routes: [
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
],
};
render() {
return (
<View style={styles.container}>
<TabView
navigationState={this.state}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
style={styles.container}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: StatusBar.currentHeight
},
scene: {
flex: 1,
},
});
So I copy/pasted and ran your code (with a different background color) as an expo snack here: https://snack.expo.io/B1-xKYu2N and it's working.
If this is your first project, the most likely issue is missing or incorrectly installed packages. Double check your package.json for something like "react-native-tab-view": "^2.0.1". If it's there (or after you add it), try running rm -rf ./node_modules && npm install in terminal from inside the project directory to delete the packages and re-install them. Wish I could be more help!

Resources