Error in putting ImageView component within View component - javascript

When I'm putting ImageView component within View component, I am getting the error: Error: Text strings must be rendered within a component. I don't understand what is wrong over here. Below is the code snippet:
import React from 'react';
import { View, Image, ScrollView, TouchableOpacity, Modal, Text } from 'react-native';
import styles from './cameraStyles';
import ImageView from "react-native-image-viewing";
export default ({captures=[], lflagImage=false}) => {
const [flagImage, setflagImage] = React.useState(lflagImage);
return (
<ScrollView horizontal={true} style={[styles.bottomToolbar, styles.galleryContainer]}>
{captures.map(({ uri }) => (
<View style={styles.galleryImageContainer} key={uri}>
<TouchableOpacity onPress={()=> {setflagImage(prevData => !prevData)}}>
<Image source={{ uri }} style={styles.galleryImage}/>
</TouchableOpacity>
<ImageView
images={captures}
imageIndex={0}
visible={flagImage}
onRequestClose={() => setflagImage(prevData => !prevData)}
/>
</View>
))}
</ScrollView>
)
}

It looks like you have an extra set of braces within your TouchableOpacity's onPress event. It should be:
onPress={()=> setflagImage(prevData => !prevData)}
This could be causing the issue you are experiencing.
I also can't see what styles.galleryImage is, but make sure you are defining a height and width or else it won't display anyway.

Related

React native useState and return statement not working together

Here whenever i click the icon it doesnt show anything. It supposed to be showing some text and when clicked again it should hide the text. Im using react native.
import React, { useState } from 'react';
import { View, Text, StyleSheet, Button, Image, TouchableOpacity} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
export default function Edit(props, { navigation }) {
const [slide, setSlide] = useState(false);
const toggle = () => {
setSlide(!slide);
console.log('clicked');
return (
<View>
<Text>random</Text>
<Text>random</Text>
</View>
);
}
return (
<View>
<FontAwesome name="sliders" size={30} color="#000" onPress={() => toggle()}/>
</View>
}
After testing the only thing it shows is the console.log('clicked') message. It does not display anything else. Also the icon displays normally. Everything is working except the and the content in those tags.
Rather than returning the View from your toggle function, you actually need to display that view your view hierarchy (eg what is returned from your component).
I've demonstrated in the example by using a ternary expression -- if slide is true, it gets shown, otherwise it does not.
export default function Edit(props, { navigation }) {
const [slide, setSlide] = useState(false);
const toggle = () => {
setSlide(!slide);
console.log('clicked');
}
return (
<View>
<FontAwesome name="sliders" size={30} color="#000" onPress={() => toggle()}/>
{slide ? <View>
<Text>random</Text>
<Text>random</Text>
</View> : null}
</View>
);
}
Snack example: https://snack.expo.io/7lVezwWs7

How can I convert stateless function to class component in react native

I am new in react native, I have been looking for how to convert this function to a class component in react native. Please I need help to convert the code below to react component.
import React from 'react';
import { View, Image, ScrollView } from 'react-native';
import styles from './styles';
export default ({captures=[]}) => (
<ScrollView
horizontal={true}
style={[styles.bottomToolbar, styles.galleryContainer]}
>
{captures.map(({ uri }) => (
<View style={styles.galleryImageContainer} key={uri}>
<Image source={{ uri }} style={styles.galleryImage} />
</View>
))}
</ScrollView>
);
To turn this into a class component, just move the code into the class component's render method, and change references to props with references to this.props. For this component, no other changes are needed.
export default class Example extends React.Component {
render () {
const { captures = [] } = this.props;
return (
<ScrollView
horizontal={true}
style={[styles.bottomToolbar, styles.galleryContainer]}
>
{captures.map(({ uri }) => (
<View style={styles.galleryImageContainer} key={uri}>
<Image source={{ uri }} style={styles.galleryImage} />
</View>
))}
</ScrollView>
)
}
}

React-Native : ScrollView not showing the full content

I'm building an app with React-Native and for my Home Page im using the ScrollView but it doesn't show the full content. I have e header on the top so that may be blocking the full content or i don't know.
The code :
import React from "react";
import { View, StyleSheet, Text, ScrollView } from "react-native";
import Content from "../components/Content/content";
import Header from "../components/Header/header";
import Carousel1 from "../components/Carousel/index";
import Buttons from "../components/Buttons/buttons";
export default class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
let drawerLabel = "Home";
return { drawerLabel };
};
render() {
return (
<View style={styles.container}>
<Header {...this.props} />
<ScrollView style={{flex:1}}>
<Carousel1 />
<Content />
<Buttons />
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f9f9f9"
}
});
Any idea how to fix this?
Try it with react native Flatlist instead of ScrollView:
React-native Flatlist
Try using contentContainerStyle instead of style with ScrollView.
Since I don't have access to your Carousel1 , Content, and Buttons component to give you a certain answer, I suggest you try the following:
render() {
return (
<View style={styles.container}>
<Header {...this.props} />
<ScrollView contentContainerStyle={{ flexDirection:"column" }}>
<Carousel1 />
<Content />
<Buttons />
</ScrollView>
</View>
);
}
}
Report back with your results.
Remove style={{flex:1}} from ScrollView and see

Adjacent JSX elements must be wrapped in an enclosing tag React Native

I'm a beginner in React Native trying to test out TouchableOpacity. I keep getting this error code 'Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (16:4)'
The issue seems to be at the opening TouchableOpacity tag.
I've already tried putting fragments around it but it didn't work does anyone know how I fix this??
import React from 'react';
import { Text, StyleSheet, View, Button, TouchableOpacity } from 'react-
native';
const HomeScreen = () => {
return (
<View>
<Text style={styles.text}>Sup boiz</Text>
<Button
onPress={() => console.log('Button pressed')}
title="Go to components demo"
/>
<TouchableOpacity onPress={ () => console.log('List Pressed')>
<Text>Go to List demo</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
export default HomeScreen;
<TouchableOpacity onPress={ () => console.log('List Pressed')}>
<Text>Go to List demo</Text>
</TouchableOpacity>
Simple syntax error. It should be onPress={ () => console.log('List Pressed')}
You missed }

Custom button Component in React Native is not accepting props

I made a custom Button(component) in react native to use it in the whole app with required parametric values(color,title,onPress funtion etc) but it's not accepting the values,I'm passing on calling
here's my button class
import React from 'react';
import {Button,Text} from 'react-native';
export const CustomButton = ({btnTitle, btnBgColor,btnPress}) =>
(
<Button
title={btnTitle}
style={
{
width:'200',
height:'40',
padding:10,
marginTop:20,
backgroundColor:'btnBgColor',
}}
onPress = {btnPress}>
</Button>
);
here I'm using it
export class Login extends Component<Props> {
render() {
return(
<View style={styles.containerStyle}>
<ImageBackground source={require ('./../../assets/images/bg.jpg')}
style={styles.bgStyle}/>
<View style={styles.loginAreaViewStyle}>
<Image />
<CustomInputField
inputPlaceholder={'Email'}
userChoice_TrF={false}
/>
<CustomInputField
inputPlaceholder={'Password'}
userChoice_TrF={true}
/>
<CustomButton
btnTitle={'Login'}
btnBgColor={'black'}
btnPress={this._LoginFunction()}/>
</View>
</View>
);
}
_LoginFunction()
{
return(alert('Login successful'))
}}
here's outn put
you can see my parametric values, color,widh,height etc made no effect on button
here i made some changes in your code.
import React from "react";
import {TouchableOpacity,Text} from 'react-native';
export const AppButton = ({btnTitle, btnBgColor, textColor, btnTextSize, btnPress, btnPadding})=>(
<TouchableOpacity style={{backgroundColor:btnBgColor }} onPress={btnPress}>
<Text style={{color:textColor, fontSize:btnTextSize, padding: btnPadding}}>
{btnTitle}
</Text>
</TouchableOpacity>
)
And use it like this, definitely it will solve your problem.
import {AppButton} from "../../components/AppButton";
<AppButton
btnBgColor={'#2abec7'}
btnPadding={10}
btnPress={this._LoginFunction}
btnTextSize={18}
btnTitle={'list'}
textColor={'#000'}
/>
and don't use () at
btnPress={this._LoginFunction()}
simply use it as
btnPress={this._LoginFunction}
The issue is because you have basically created a wrapper around the Button component from react-native
https://facebook.github.io/react-native/docs/button
If you look at the documentation for the button there are only 7 props that you can use
https://facebook.github.io/react-native/docs/button#props
onPress
title
accessibilityLabel
color
disabled
testID
hasTVPreferredFocus
There is no style prop. So what you are passing is just ignored.
What you need to do in your CustomButton is use one of the Touchables
https://facebook.github.io/react-native/docs/handling-touches#touchables
So you're component could become something like this (you may need to adjust the styling etc):
import React from 'react';
import {TouchableOpacity,Text} from 'react-native';
export const CustomButton = ({btnTitle, btnBgColor,btnPress}) =>
(
<TouchableOpacity
style={{
width:200,
height:40,
padding:10,
marginTop:20,
backgroundColor:{btnBgColor},
}}
onPress = {btnPress}>
<Text>{btnTitle}</Text>
</TouchableOpacity>
);
Also the values that you need to pass for the width and height need to be numbers.
Here is a snack with it working https://snack.expo.io/#andypandy/custom-button-example
Use arrow funtion like this
See the diffrence
export const CustomButton = ({btnTitle, textColor, textSize, btnBgColor, btnPress}) =>
({
<Button
title={btnTitle}
style={{
width:'200',
height:'40',
padding:10,
marginTop:20,
backgroundColor:{btnBgColor},
}}
onPress = {btnPress}>
</Button>
});
<CustomButton
btnTitle='login'
btnBgColor='black'
btnPress={this._LoginFunction()}
/>

Categories