So I've added a TouchableHighlight into my code but it doesn't render the image into the app, and the navigation prop assigned to it isn't activated.
import React, { Component } from "react";
import { Center } from "#builderx/utils";
import { View, StyleSheet, Image, Text } from "react-native";
import { createAppContainer } from 'react-navigation';
import { MainNavigation } from '../screens/MainNavigator';
import { TouchableHighlight } from 'react-native'
import { AppContainer } from "../screens/MainNavigator"
export default class DlLoading_2 extends Component {
render() {
return (
<View style={styles.root}>
<Center />
<TouchableHighlight onPress={() =>
{this.props.navigation.navigate('DlMain')}}>
<Image
source={require('../assets/ComponentTMP_0-image.jpg')}
style={styles.blueDisk}/>
</TouchableHighlight>
<Center horizontal>
<Image
source={require("../assets/ComponentTMP_0-image2.png")}
style={styles.dlLogo}
/>
</Center>
<Center horizontal>
<Text style={styles.text}>TRANSINDENTAL MEDITATION</Text>
</Center>
</View>
)
}
}
const styles = StyleSheet.create({
blueDisk: {
height: 401.5,
width: 602,
position: "absolute"
}
});
I've tried changing the image type, adding the styling to the element and that's pretty much all I can think of.
Related
This is my InputItems.js
import React, { useState } from "react";
import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
function InputItems(props) {
const [inputGoal, setinputGoal] = useState("");
return (
<View style={style.wholeInputcontainer}>
<TextInput
placeholder="Enter the Text"
style={style.textInput}
onChangeText={(enteredtext) => {
setinputGoal(enteredtext);
}}
value={inputGoal}
/>
<Button title="Submit" onPress={props.onpressprop.bind(this,inputGoal)} />
</View>
);
}
const style = StyleSheet.create({
wholeInputcontainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
textInput: {
borderBottomColor: "blue",
borderBottomWidth: 4,
marginBottom: 10,
width: 300,
},
});
export default InputItems;
and this is my App.js
import React, { useState } from "react";
import { StatusBar } from "expo-status-bar";
import {
StyleSheet,
Text,
View,
TextInput,
Button,
ScrollView,
FlatList,
} from "react-native";
import Listitems from "./Components/ListItems";
import InputItems from "./Components/InputItems";
// import { Button, TextInput } from 'react-native-web';
export default function App() {
const [outputGoal, setoutputGoal] = useState([]);
const Onpress = (InputGoalProp) => {
setoutputGoal((Currentgoal) => [...Currentgoal, InputGoalProp]);
};
return (
<View style={style.root}>
<InputItems onpressprop={Onpress} />
{/* We can use mapping from outputGoal but using FlatList instead of ScrollView is more efficient */}
<FlatList
data={outputGoal}
renderItem={(listitems) => <Listitems anything={listitems.item} />}
/>
<StatusBar style="auto" />
</View>
);
}
const style = StyleSheet.create({
//StyleSheet is a class of react-native, we can always use inline styleing
root: {
marginTop: 100,
},
});
Stuck into this problem. Please help me if you can.
This is the error...
Invariant Violation: View config getter callback for component input must be a function (received undefined). Make sure to start component names with a capital letter.
This error is located at:
in input (created by TextInput)
in TextInput (created by InputItems)
You have a typo in this line:
<Button title="Submit" onPress={props.onpressprop.bind(this,inputGoal)} />
There's a comma instead of a period after this. It should be
<Button title="Submit" onPress={props.onpressprop.bind(this.inputGoal)} />
In InputItems.js you still have the wrong import (seems like you have already corrected it in App.js):
change this: import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
to: import { Text, View, StyleSheet, TextInput, Button } from "react-native";
I am working with Webview in React native.
Header and footer is not webview, and header includes navigation.goBack() button in it.
But it is not working even footer has navigation.navigate() button which is working.
Here is my code.
import 'react-native-gesture-handler';
import * as React from "react";
import { ImageBackground, StyleSheet, Text, View, Image, TextInput, TouchableOpacity } from "react-native";
import { AntDesign } from '#expo/vector-icons';
import { WebView } from 'react-native-webview';
import { height, width } from 'react-native-dimension';
import HeaderLink from './header_link';
import Footer from './footer';
const styles = StyleSheet.create({
container: {
flex: 1,
// flexDirection: "column"
},
});
class LinkPageScreen extends React.Component {
render() {
this.state = {
url: this.props.route.params.url,
title: this.props.route.params.title,
};
var linkURL = this.state.url;
return (
<View style={styles.container}>
<HeaderLink
image={false}
imageSource={{}}
left={
<TouchableOpacity onPress={ () => this.props.navigation.goBack(null) }>
....
</TouchableOpacity>
}
/>
<WebView
source={{uri: linkURL}}
style={{marginTop: height(12), marginBottom: height(11)}}
/>
<Footer navigation={this.props.navigation} />
</View>
)
}
}
export default LinkPageScreen
I changed navigation.goBack into navigation.navigate() but it was not working also in header.
I checked for same error on stackoverflow but webview.goback() function was there, and my problem is not like that. I am sure.
I found the solution. Even I don't know why.
I changed the code like below.
class LinkPageScreen extend React.component {
render() {
return (
<View>
<WebView .... />
<Header />
<Footer />
......
Unbelivably it works, i just changed the order of tags between webview and header.
Anyone can explain to me why this is happening?
Thanks.
You can try the code below:
import { useNavigation } from '#react-navigation/native';
const {goBack} = useNavigation();
const navigateBack = useCallback(() => {
goBack();
}, [goBack]);
.
.
.
<TouchableOpacity onPress={navigateBack}>
....
</TouchableOpacity>
For some reason, there is an error when you click on the opening menu and it is unclear to me why it is happening.
"react-navigation": "^3.5.1"
This is for open my menu drawer with pressing.
```
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import { Avatar } from 'react-native-elements';
import { Left, Icon } from 'native-base';
import { DrawerActions } from 'react-navigation';
class Header extends Component {
render() {
return (
<View style={styles.viewStyle}>
<Left>
<Icon
name='menu'
style={styles.menu}
onPress={() => this.props.navigation.openDrawer()}
/>
</Left>
<Text style={styles.textStyle}>Episodes</Text>
</View>
);
}
}
export default Header;
```
```
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { Right, Left, Icon } from 'native-base';
import EpisodeList from '../components/EpisodeList';
import Header from '../components/header';
class HomeScreen extends Component {
static navigationOptions = {
drawerIcon: ({ tintColor }) => (
<Icon name='home' style={{ fontSize: 24, color: tintColor }} />
)
};
render() {
return (
<View style={styles.container}>
<Header />
<View>
<Image
source={{
uri:
'https://images.pexels.com/photos/754082/pexels-photo-754082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
}}
style={{ width: 400, height: 700, position: 'absolute' }}
/>
<EpisodeList />
</View>
</View>
);
}
}
export default HomeScreen;
```
I expect the drawer will open when I press the menu button
the header is a component that i pass into another component that its
activated from there .
You need to pass navigation prop to your child components to use this kind of functionality.
<Header navigation={this.props.navigation} />
or in header file do this,
import {withNavigation} from "react-navigation";
....
...
...
export default withNavigation(Header);
Did you try with the following?
this.props.navigation.dispatch(DrawerActions.openDrawer());
Don't forgot to import,
import { DrawerActions } from "react-navigation";
Please try this, in your HomeScreen
<Header {...this.props}/>
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've created a few components. One of them should allow nesting however it inexplicably does not (inexplicable because I couldn't find any posts with quite this problem)
There is one image required to run this (it can be replaced with anything)
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { View, StatusBar, StyleSheet, ImageBackground } from 'react-native';
export class PhonyStatusBar extends Component {
render () {
return (
<View style={styles.statusBar} />
);
}
}
export class HomeScreen extends Component {
static propTypes = {
children: PropTypes.string
}
render () {
return (
<View>
{this.props.children}
</View>
);
}
}
export class AppGrid extends Component {
render () {
return (
<View />
);
}
}
export default class App extends Component {
render() {
return (
<View>
{/* hide system status bar */}
<StatusBar hidden={true} />
<PhonyStatusBar />
{/* throw in our own status bar */}
<HomeScreen>
<View />
</HomeScreen>
</View>
);
}
}
const styles = StyleSheet.create({
backgroundImage: {
width:'100%',
height:'100%',
},
statusBar: {
width: '100%',
height: 25.33,
backgroundColor: 'rgba(255, 157, 0, 0.5)'
},
});
In react children is a built in prop, already defined by the library, for components. This is not a prop that you should be defining manually. See this for more detail: https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx
Try removing:
static propTypes = {
children: PropTypes.string
}
from HomeScreen to resolve the issue.