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.
Related
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'm trying to include some icons from react-native-vector-icons in my project. Oftentimes I'm aligning the icon with e.g. an input so I want it to be the same height (or at least smaller) so I can center it in front of the input in a flex row without increasing the size of the row. However, the icons come out too small if I set their size to the font size of the input. If I increase the size of the icon, this stretches my flex box, but this is clearly unnecessary because the icon has a lot of whitespace at the top and bottom. Here's a sample screenshot:
Is there any way to trim this? The icon should be square. Here's the code that I currently have on that screen:
import React, {Component} from 'react';
import {View} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
export default class App extends Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}>
<Ionicons name='ios-checkmark' size={30} />
</View>
);
}
}
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
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>
);
}
}