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;
Related
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);
i need to show svg files and find react-native-remote-svg package. but i cant find it and not sure how to solve it anyone can help about that?
there is the warning
import {View, Text} from 'react-native';
import Image from 'react-native-remote-svg';
const App = () => {
return (
<View>
<Image
source={{
uri:
'https://example.com/my-https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svgpic.svg',
}}
style={{width: 200, height: 532}}
/>
</View>
);
};
export default App; ```
Use this react native library
https://github.com/vault-development/react-native-svg-uri
it depends on the react-native-svg library so you need both
For rendering remote SVG images better way is using https://github.com/react-native-svg/react-native-svg.
For your case:
import * as React from 'react';
import { SvgUri } from 'react-native-svg';
export default () => (
<SvgUri
width="200"
height="532"
uri="https://example.com/my-https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svgpic.svg"
/>
);
How can we use SafeAreaView in order to display a WebView? I tried this way :
import React from 'react';
import {SafeAreaView, StatusBar} from 'react-native';
import {WebView} from 'react-native-webview';
class ChaineYT extends React.Component {
render() {
return (
<SafeAreaView>
<WebView
source={{uri: "someURL"}}
/>
</SafeAreaView>
)
}
}
export default ChaineYT
But it's rendering a white page.
Thanks
You didn't specify the height and width of SafeAreaView.
Change <SafeAreaView> to <SafeAreaView style={{ flex:1 }}>
Official documentation clearly says:
A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.
I want to do text highlight in my React Native app. I am using React Native's Text component to display the text and I can give it a backgroundColor, but what I what is real highlight like you have it in the following image:
You can use the react-native-highlight-words library for this.
Here is an example:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Highlighter from 'react-native-highlight-words';
export default class Example extends Component {
render() {
return (
<View style={{alignItems: 'center', paddingTop: 300}}>
<Highlighter
highlightStyle={{backgroundColor: 'greenyellow'}}
searchWords={["Swine Flu is an infection caused by"]}
textToHighlight="Swine Flu is an infection caused by..."
/>
<Highlighter
highlightStyle={{backgroundColor: 'lightblue'}}
searchWords={["swine flu"]}
textToHighlight="The risk of swine flu..."
/>
</View>
);
}
}
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