I am new to react native so can somebody please help me to remove the footer from the webview.
I am using expo.
import React from "react";
import { ActivityIndicator, Text, View } from "react-native";
import { WebView } from "react-native-webview";
const Home = () => {
const loading = () => {
return (
<ActivityIndicator
size="large"
style={{ justifyContent: "center", alignContent: "center" }}
/>
);
};
return (
<View style={{ flex: 1 }}>
<WebView
source={{ uri: "https://www.collectiveoutlet.co.nz/" }}
renderLoading={loading()}
style={{ flex: 1 }}
/>
</View>
);
};
export default Home;
Thank you
You can run javascript in the webview, here an example: https://snack.expo.io/#stealkiller06/1a0b7b
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { WebView } from "react-native-webview";
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const runFirst = `
let selector = document.querySelector("div#shopify-section-footer")
selector.style.display = "none"
true; // note: this is required, or you'll sometimes get silent failures
`;
return (
<View style={styles.container}>
<WebView
source={{ uri: "https://www.collectiveoutlet.co.nz/" }}
injectedJavaScript={runFirst}
style={{ flex: 1 }}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
I hope this works for you.
Related
I using the react-native-elements library to design my app and I want to create my product details page all data I passed whit props come true and but when I want to set image URI the image component shows nothing but when I put the URL as string manually it shows the Image
image URL: https://boho-box.com/storage/upload/product/IMG_1696_1609848185.jpg
Item.js file:
import * as React from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { Card, Button, Image } from 'react-native-elements';
import { useNavigation } from '#react-navigation/native';
function Item(props){
const navigation = useNavigation();
return(
<View>
<Image
style={styles.image}
source={{ uri: props.pDetail.img }}
PlaceholderContent={<ActivityIndicator />}
/>
<Text>{props.pDetail.title}</Text>
<Text>Price: ${props.pDetail.price}</Text>
<Text>{props.pDetail.img}</Text>
</View>
);
}
const styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
col: {
flex: 1,
},
image: {
width: 200,
height: 200,
}
});
export default Item;
page screenshot when using source={{ uri: props.pDetail.img }} :
page screenshot when using source={{ uri: 'https://boho-box.com/storage/upload/product/IMG_1696_1609848185.jpg' }} :
It happens too when I using the react-native image component.
Detail.js :
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import Item from './components/Item';
function DetailsScreen({ route, navigation }) {
const { name, price, img } = route.params;
const detail = {
title: JSON.stringify(name),
price: JSON.stringify(price),
img: JSON.stringify(img),
}
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Item pDetail={detail} />
</View>
);
}
export default DetailsScreen;
change the detail const in Detail.js file to:
JSON.stringify put image path between the " "
const detail = {
title: JSON.stringify(name),
price: JSON.stringify(price),
img: img,
}
Looking to have button enter go into another screen:
need help with navigation screen.
I keep getting error:
Cannot read property 'navigation' of undefined
Evaluating App.js
Loading App.js
TypeError: Cannot read property 'navigation' of undefined
https://snack.expo.io/#ganiyat1/colorful-thrills
import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground, Image, Button } from 'react-native';
import Constants from 'expo-constants';
import { StackNavigator} from 'react-navigation';
import Books from './components/Books';
// You can import from local files
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const Book = StackNavigator({
Books: { screen: Books },
});
const { navigate } = this.props.navigation;
export default function App() {
return (
<View style={styles.container}>
<View style={styles.topContainer}>
<Text style={styles.title}> Colorful Thrills
</Text >
</View>
<View style={styles.bottomContainer}></View>
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={require('./assets/bookcover.png')}
/>
<Text style={styles.paragraph}>
{"\n"} BOOKWORMS, UNITE! {"\n"} {"\n"}
Suspense, Mystery and Thrillers by Authors of Color
</Text>
<Button
color='#ff914d'
title= 'ENTER'
onPress={() =>
navigate('Books')}
/>
</View>
</View>
);
}
In the above code snippet, I don't see a default Navigator being returned form the entry file, which is App.js by default in React Native.
I assume that you just started to learn React Native, so I will spare you all the minor details and walk you through the solution.
I refactored the App.js file to a into a new component file in /components/Home.js.
Added a default stack Navigator in App.js which has two screens, Home and Books.
Now you can access all the Navigation props in your Home and Books component, as it is being declared in the Navigator variable in App.js
Here is a live demo of your code on Expo.
//App.js
import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground, Image, Button } from 'react-native';
import Constants from 'expo-constants';
import { StackNavigator} from 'react-navigation';
import Books from './components/Books';
import Home from './components/Home'
import { Card } from 'react-native-paper';
const Navigator = StackNavigator({
Books: { screen: Books },
Home:{screen:Home}
});
export default function App(props) {
return (
<Navigator />
);
}
//component/Books.js
import React, { useState } from 'react';
import { StyleSheet, SafeAreaView,Button } from 'react-native';
import MaterialTabs from 'react-native-material-tabs';
const Books = (props) => {
const {navigation} = props
const [selectedTab, setSelectedTab] = useState(0);
return (
<SafeAreaView style={styles.container}>
<MaterialTabs
items={['New Releases', 'All', 'BOM']}
selectedIndex={selectedTab}
onChange={setSelectedTab}
barColor="#1fbcd2"
indicatorColor="#ff914d"
activeTextColor="white"
/>
<Button
color='#ff914d'
title= 'Home'
onPress={() =>
navigation.navigate('Home')}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default Books
//component/Home.js
import React from 'react'
import {View,Text,StyleSheet,Button,Image} from 'react-native'
const Home = (props) => {
const {navigation} = props
return (
<View style={styles.container}>
<View style={styles.topContainer}>
<Text style={styles.title}> Colorful Thrills
</Text >
</View>
<View style={styles.bottomContainer}></View>
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={require('../assets/bookcover.png')}
/>
<Text style={styles.paragraph}>
{"\n"} BOOKWORMS, UNITE! {"\n"} {"\n"}
Suspense, Mystery and Thrillers by Authors of Color
</Text>
<Button
color='#ff914d'
title= 'ENTER'
onPress={() =>
navigation.navigate('Books')}
/>
</View>
</View>
)
}
export default Home
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
topContainer: {
flex: 1,
backgroundColor: '#ff914d',
},
bottomContainer: {
flex: 1,
backgroundColor: '#96d0e3',
},
imageContainer: {
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: 300,
},
title:{
margin: 24,
marginTop: 50,
fontSize: 40,
fontWeight: 'bold',
textAlign: 'center',
fontFamily: 'GillSans-Italic',
},
paragraph: {
margin: 24,
marginTop: 0,
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
}
});
I am working on an App which can display a simple Image Slider using Carousel.
I have used the Carousel from "react-native-banner-carousel" library.
Code:
ImageSlider.js
import React from 'react';
import Carousel from 'react-native-banner-carousel';
import { StyleSheet, Image, View, Dimensions } from 'react-native';
const BannerWidth = Dimensions.get('window').width;
const BannerHeight = 260;
const images = [
"https://images-na.ssl-images-amazon.com/images/I/61McsadO1OL.jpg",
"https://images-na.ssl-images-amazon.com/images/I/51vlGuX7%2BFL.jpg",
"https://images-na.ssl-images-amazon.com/images/I/717DWgRftmL._SX522_.jpg"
];
export default class ImageSlider extends React.Component {
renderPage(image, index) {
return (
<View key={index}>
<Image style={{ width: 500, height: BannerHeight }} source={{ uri: image }} />
</View>
);
}
render() {
return (
<View style={styles.container}>
<Carousel
autoplay
autoplayTimeout={5000}
loop
index={0}
pageSize={BannerWidth}
>
{images.map((image, index) => this.renderPage(image, index))}
</Carousel>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center'
},
});
App.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Header from './components/Header';
import ImageSlider from './components/ImageSlider';
class App extends Component {
render () {
return (
<View>
<Header headerText = "SAMPLE APP" />
<ImageSlider />
</View>
);
}
}
export default App;
I am importing ImageSlider inside the App.js
I am trying the method mentioned in this link: https://github.com/f111fei/react-native-banner-carousel
But the output I am getting is somewhat like this:
Where am I going wrong here?
class App extends Component {
render () {
return (
<View style={{flex:1}}>
<Header headerText = "SAMPLE APP" />
<ImageSlider />
</View>
);
}
}
Notice this in the above code
<View style={{flex:1}}>
Hope this will help.!
I am developing a mobile app with React Native. I want to open a WebView after a button pressed. Here is my code, but its not working. The button onPress method is not working.
import React, { Component } from 'react';
import { View, StyleSheet, Button, WebView } from 'react-native';
import { Constants } from 'expo';
export default class webView extends Component {
onNavigationStateChange = navState => {
if (navState.url.indexOf('https://www.google.com') === 0) {
const regex = /#access_token=(.+)/;
const accessToken = navState.url.match(regex)[1];
console.log(accessToken);
}
};
renderContent() {
return (
<WebView
source={{
uri: '',
}}
onNavigationStateChange={this.onNavigationStateChange}
startInLoadingState
scalesPageToFit
javaScriptEnabled
style={{ flex: 1 }}
/>
);
}
render() {
return (
<View style={styles.container}>
<Button
style={styles.paragraph}
title="Login"
onPress={() => this.renderContent()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
I tried onPress={this.renderContent()} this also, but it give an exception. What can I do ?
You aren't rendering your WebView in the the render() method of the Component. Just think of render as your DOM of the webpage. You need to provide the component a place in the render component, than you can remove it or add it, see i am calling the renderContent from the render method. So whenever the state variable showWebView is true it will render the WebView You should do something like this:
import React, { Component } from 'react';
import { View, StyleSheet, Button, WebView } from 'react-native';
import { Constants } from 'expo';
export default class webView extends Component {
state={
showWebView: false
}
onNavigationStateChange = navState => {
if (navState.url.indexOf('https://www.google.com') === 0) {
const regex = /#access_token=(.+)/;
const accessToken = navState.url.match(regex)[1];
console.log(accessToken);
}
};
renderContent() {
return (
<WebView
source={{
uri: '',
}}
onNavigationStateChange={this.onNavigationStateChange}
startInLoadingState
scalesPageToFit
javaScriptEnabled
style={{ flex: 1 }}
/>
);
}
render() {
return (
<View style={styles.container}>
{ this.state.showWebView && this.renderContent() }
<Button
style={styles.paragraph}
title="Login"
onPress={() => this.setState({showWebView: true})}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
I think you must import the following
import { WebView } from 'react-native-webview'
instead of
'react'
I have 3 components and I am trying to set their heights (header, body, footer) but when it renders, each component has just the height of one line of text it contains.
import React from 'react';
import { View, Text } from 'react-native';
import Header from './Header';
import Body from './Body';
import Footer from './Footer';
import * as globalStyles from '../styles/global';
const HomeScreen = () => (
<View style={{ flex: 1 }}>
<Header style={{ flex: 1 }} title={'MyTitle'}>
<Text>Component</Text>
</Header>
<Body style={{ flex: 3 }}>
<Text>my body</Text>
</Body>
<Footer style={{ flex: 1 }}>
<Text>my footer</Text>
</Footer>
</View>
);
export default HomeScreen;
App
import React from 'react';
import { Provider } from 'react-redux';
import HomeScreen from './components/HomeScreen';
import createStore from './createStore';
const store = createStore();
export default () => (
<Provider store={store}>
<HomeScreen />
</Provider>
);
Header
import React, { PropTypes } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as globalStyles from '../styles/global';
const Header = ({ children, title }) => (
<View>
<Text style={globalStyles.COMMON_STYLES.text}>
{children}
{title}
{title}
</Text>
</View>
);
Header.propTypes = {
children: PropTypes.node
};
const styles = StyleSheet.create({
header: {
paddingTop: 20
}
});
export default Header;
Footer
import React, { PropTypes } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as globalStyles from '../styles/global';
const Footer = ({ children }) => (
<View>
<Text style={globalStyles.COMMON_STYLES.text}>
{children}
</Text>
</View>
);
Footer.propTypes = {
children: PropTypes.node.isRequired
};
const styles = StyleSheet.create({
header: {
marginTop: 20,
flex: 1,
}
});
export default Footer;
Body
import React, { PropTypes } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as globalStyles from '../styles/global';
const Body = ({ children, title }) => (
<View>
<Text style={globalStyles.COMMON_STYLES.text}>
{children}
{title}
{title}
</Text>
</View>
);
Body.propTypes = {
children: PropTypes.node
};
const styles = StyleSheet.create({
header: {
marginTop: 20,
flex: 1,
}
});
export default Body;
global styles
import { StyleSheet } from 'react-native';
export const BG_COLOR = '#343336';
export const BAR_COLOR = '#4e4d52';
export const TEXT_COLOR = '#e5dbda';
export const HEADER_TEXT_COLOR = '#fff';
export const MUTED_COLOR = '#8e8786';
export const LINK_COLOR = '#48e9d9';
export const ACCENT_COLORS = ['#d31d65', '#751c53', '#c248c0', '#7d6e8b', '#bbc6f7'];
export const COMMON_STYLES = StyleSheet.create({
pageContainer: {
backgroundColor: BG_COLOR,
marginTop: 0,
paddingTop: 5,
paddingHorizontal: 10
},
text: {
color: TEXT_COLOR,
fontFamily: 'Helvetica Neue'
}
});
My understanding is that the Body should be 3 x the height of header or footer.
React-native:
react-native-cli: 2.0.1
react-native: 0.41.2
EDIT
Flex should be given to your root containers of the header, body and footer components. Header, Footer and Body are custom components, the style props won't be applicable to them, the style you applied just get passed as a prop
const Footer = ({ children }) => (
<View style={{ flex: 1 }}> // root container of footer
<Text style={globalStyles.COMMON_STYLES.text}>
{children}
</Text>
</View>
);
const Body = ({ children, title }) => (
<View style={{ flex: 3 }}>
<Text style={globalStyles.COMMON_STYLES.text}>
{children}
{title}
{title}
</Text>
</View>
);
const Header = ({ children, title }) => (
<View style={{ flex: 1 }}> // root container of header
<Text style={globalStyles.COMMON_STYLES.text}>
{children}
{title}
{title}
</Text>
</View>
);
Hope its working for you