I was using react-native-barcode-scanner-google but its not working now.i have two screen on my home page one of them is barcode scanner screen.when i click on barcode screen i got message "unfortunatly the app has stoped".I also try other barcode scanner libraries but not working.Im new to react native,So any help would be highly appreciated.
Sample code
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Alert } from 'react-native';
import BarcodeScanner from 'react-native-barcode-scanner-google';
export default class BarcodeApp extends Component {
render() {
return (
<View style={{flex: 1}}>
<BarcodeScanner
style={{flex: 1}}
onBarcodeRead={({data, type}) => {
// handle your scanned barcodes here!
// as an example, we show an alert:
Alert.alert(`Barcode '${data}' of type '${type}' was scanned.`);
}}
/>
</View>
);
}
}
AppRegistry.registerComponent('BarcodeApp', () => BarcodeApp);
Related
As the title says, I'm trying to send data from a Flatlist component and send it to another component (click on toy in list, opens up the toy details). I've tried numerous alternative approaches, and can't figure out what isn't working. This is the closest I've come to it working, where there's no error messages. Alternatively would prefer to use useState to pass data
Passing the data through my flatlist component:
import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native'
import React, {useState} from 'react'
import Toy from './Database'
import ToyCard from './ToyCard'
const FLToyCard = ({navigation}) => {
const headerComp = () => {
return(
<View style={{alignSelf: 'center'}}>
<Text style={{fontSize: 25, padding: 10}}>All Toys For Sale</Text>
</View>
)
}
return(
<View>
<FlatList
data={Toy}
renderItem={({item})=>{const {name, id, image, price, desc, seller, type, longDesc} = item; return(<View style={{flex:1}}><ToyCard name={name} image={image} price={price} desc={desc} seller={seller} id={id} type={type} longDesc={longDesc} onPress={()=>navigation.navigate('ToyDetails', {name, id, image, price, seller, desc, longDesc, type})}/></View>)}}
keyExtractor={(item)=>item.id}
numColumns={2}
ListHeaderComponent={headerComp}
/>
</View>
)
}
export default FLToyCard
Retrieving the data (would prefer it being retreived into the SlugFormat component, but its not a navigational page so just in case, I added one of the props to this page to see if its retrieving the data):
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import SlugFormat from '../Components/SlugFormat'
const ToyDetails = ({navigation, name}) => {
return (
<View>
<SlugFormat navigation={navigation}/>
<Text>{name}</Text>
</View>
)
}
export default ToyDetails
This is based off the help someone tried to give me on my last post, you can see it see here if necessary.
when you go to any page using navigation that time this props is received inside route.params
const ToyDetails = ({route,navigation}) => {
const {name } =route.params
return (
<View>
<SlugFormat navigation={navigation}/>
<Text>{name}</Text>
</View>
)
}
I am using React Native version 0.63.4. There is a bug that I just noticed and that didn't happen before. It does -width: '100%' - as if I added it myself to the style of any object (Text, View) I created. This was not the case before. For example, I want to paint the background of a text red. But just as much space as it is. Not all. I would add -width: '100%' - if I wanted this. But now it adds this automatically. What is the cause and solution?
import React from 'react';
import {View, Text} from 'react-native';
const App = () => {
return (
<View style={{flex: 1}}>
<Text style={{marginTop: 80, backgroundColor: 'red'}}>EXAMPLE</Text>
</View>
);
};
export default App;
Try this way because It will take full width by default, If you want to wrap then try adding alignSelf:"flex-start" like
import React from 'react';
import {View, Text} from 'react-native';
const App = () => {
return (
...
<Text style={{... , alignSelf:"flex-start"}}>EXAMPLE</Text>
...
);
};
export default App;
I am using react native to build project and I am facing a problem with long launch time, I try to follow https://reactnative.dev/docs/ram-bundles-inline-requires, however it is not so clear about Investigating the Loaded Modules, and how to put only the necessary modules for first screen.
I am not also able to find index.(ios|android).js file (is it index.android.bundle).
If you can tell me how to extract only necessary modules and recommend docs or examples about implementing that?
With considering the official documents, pay attention to this example:
You have a Main screen (view) in your app like HomeScreen
In your HomeScreen, there are more and more components and logic in this page but assume we have a SettingsModal.
usually, modals will open when you touch a button.
Without inline require
you have to import your modal component to your HomeScreen at the top level of your module
with inline require
you will import your modal component to your HomeScreen when it needs to show!
Let's do this with code:
HomeScreen without inline require
import React, {useState} from 'react'
import {View, Text, Pressable} from 'react-native'
import SettingsModal from 'components/modal'
function HomeScreen() {
const [showModal, setShowModal] = useState(false)
const handleShowModal = () => setShowModal(prevState => !prevState)
return (
<View>
<Text> Home Screen </Text>
<Pressable onPress={handleShowModal}>
<Text> show settings </Text>
</Pressable >
{
showModal
? <SettingsModal />
: null
}
</View>
)
}
In the above example, we import SettingsModal in our HomeScreen top level with React and View and Text...
HomeScreen with inline require
import React, {useState} from 'react'
import {View, Text, Pressable} from 'react-native'
let SettingsModal = null;
function HomeScreen() {
const [showModal, setShowModal] = useState(false)
const handleShowModal = prevState => {
if (SettingsModal == null) {
SettingsModal = require('components/modal').SettingsModal
}
setShowModal(prevState => !prevState)
}
return (
<View>
<Text> Home Screen </Text>
<Pressable onPress={handleShowModal}>
<Text> show settings </Text>
</Pressable >
{
showModal
? <SettingsModal />
: null
}
</View>
)
}
In the above example, we check if SettingsModal has not been imported yet, then we will import this component to our HomeScreen file (after user touch the show settings button)
I am fairly new to react native, nativebase, and Exponent. Unfortunately, I am having trouble getting simple components even to display. I've spent probably 6+ hours troubleshooting simple tutorial components from the nativebase documentation. I feel like I'm just missing something fundamental and I would really appreciate a helping hand.
Here's what I'm doing:
Using Exponent XDE to run my project.
Installed nativebase according to the documentation, no errors at this point.
main.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import { Container } from 'native-base';
import { CardImageExample } from './component/card.js';
AppRegistry.registerComponent('main', () => CardImageExample);
card.js
import React, { Component, Image } from 'react';
import { Container, Content, Card, CardItem, Thumbnail, Text, Icon } from 'native-base';
class CardImageExample extends Component {
render() {
return (
<Container>
<Content>
<Card>
<CardItem>
<Thumbnail source={require('./img/penguin-icon.png')} />
<Text>Instrumental Songs</Text>
<Text note>Guitar</Text>
</CardItem>
<CardItem>
<Image style={{ resizeMode: 'cover' }} source={require('./img/penguin.jpg')} />
</CardItem>
<CardItem>
<Icon name='ios-musical-notes' style={{color : '#ED4A6A'}} />
<Text>Listen now</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
export default CardImageExample;
Current error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I just have absolutely no idea where to start. Thanks.
Your main.js should like some thing Like
import * as Exponent from 'exponent';
import React from 'react';
import First from './src/app';
import { Container, Header, Title, Content, Button, Left, Right, Body,Icon, Separator } from 'native-base';
class App extends React.Component {
render() {
return <First / > ;
}
}
Exponent.registerRootComponent(App);
You have to register your app like this Exponent.registerRootComponent(App).
If you are using Exponent.
Example: https://github.com/exponent/nativebase-example
I use react-native-video-player and I have difficulties with adjusting size of video player, it's too big and doesn't fit into screen and control buttons doesn't fit into available space.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import VideoPlayer from 'react-native-video-player';
export default class VideoPage extends Component {
render() {
return (
<View>
<VideoPlayer
video={{ uri: 'file:///storage/emulated/0/Download/sample_video.mp4' }}
videoWidth={1280}
videoHeight={720}
/>
</View>
);
}
}
Here is what I have now, as you can see this is NOT OK.
I need some help with how to make it smaller. I tried to specify width & height as you can see, but it just doesn't change anything it stays as it is. Maybe there is something I don't know ?
Thank you in advance for any help or suggestions.
set size to your view not your videoplayer and do it by styling.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import VideoPlayer from 'react-native-video-player';
export default class VideoPage extends Component {
render() {
return (
<View style={{width: 1280, height: 720}}>
<VideoPlayer
video={{ uri: 'file:///storage/emulated/0/Download/sample_video.mp4' }}
/>
</View>
);
}
}