I have been trying to import a component that contains my custom input component into my profile screen.I have tried import both the ProfTab.js(container of my custom textInput component) and the FlexibleInput.js(custome TextInput.js) into my profileScreen.js separately to make sure there was nothing wrong with the files. I have tried deleting the app and restarting the bundle but nothing seems to be working, but i keep getting thrown this error instead.
Failed to load bundle(http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minigy=false) with error: (Unable to resolve module ../Components/profScreenComp/FlexInput from /Users/apple/Documents/Vscode/React-Native/Fluffy/src/Componensts/profScreenComp/ProfTabs.js: The module ../Components/profScreenComp/FlexInput could not be found from /Users/apple/Documents/Vscode/React-Native/Fluffy/src/Components/profScreenComp/ProfTab.js.
Indeed, none of these files exists)
Below is my profileScreen.js
import React, { Component } from 'react';
import {View, Text, StyleSheet,Dimensions, ImageBackground,Button} from "react-native"
import Auth from "../Components/authComp/auth"
import ProfileTab from '../Components/profScreenComp/ProfTab'
// import FlexibleInput from '../Components/profScreenComp/flexInput'
import {connect} from 'react-redux'
const Width= Dimensions.get('window').width
class ProfileScreen extends Component {
static navigatorStyle = {
navBarHidden: true,
drawUnderNavBar: true,
// navBarTranslucent: true
};
handleNavigation= ()=>{
this.props.navigator.push({
screen: "fluffy.ProfileInfoScreen",
animated: true,
animationType: "ease-in"
})
}
render() {
// let display= (<Auth/>)
if(!this.props.auth){
return(
<Auth/>
)
}else{
return (
<View style={{flex: 1}}>
<ImageBackground style={styles.background}>
<View style= {styles.header}>
<Text style={{color: "white", fontSize: 20,}}>PROFILE</Text>
</View>
<View style={styles.pointsBox}>
</View>
</ImageBackground>
{/* <View style={styles.circle}><Text>M</Text></View> */}
<View style= {styles.activity}>
<View style={styles.tabsContainer}>
<View style={styles.tabs}>
<Text>Profile</Text>
<Text>My Orders</Text>
<Text>Support</Text>
</View>
</View>
<View style={styles.body}>
<ProfileTab/>
{/* <FlexibleInput/> */}
</View>
</View>
</View>
)
}
}
}
const styles= StyleSheet.create({
header:{
width: Width,
height:50,
alignItems: 'center',
justifyContent: "center"
,backgroundColor: "#20265c",
justifyContent: "flex-end",
paddingBottom: 10,
},
background:{
backgroundColor: "maroon",
height: '50%',
flex: 4,
justifyContent:'space-between'
},
pointsBox:{
height: 40,
width: '60%',
backgroundColor: "gray",
borderRadius: 5,
alignSelf: 'center',
},
// circle:{
// alignItems: 'center',
// justifyContent:"center",
// height: 100,
// width: 100,
// backgroundColor: "white",
// position: "absolute",
// borderRadius: 50,
// top: 240,
// left: 140,
// zIndex:2
// },
activity:{
backgroundColor: "gray",
flex: 6,
// justifyContent: "center",
// alignItems: 'center',
},
tabs:{
// marginTop: 10,
// padding: 10,
backgroundColor:'white',
borderRadius: 50,
height: '90%',
width: '90%',
flexDirection: 'row',
justifyContent:'space-around',
alignItems: 'center',
},
tabsContainer:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor: 'orange'
},
body:{
flex: 9,
backgroundColor: 'beige'
}
})
const mapStateToProps = state => {
return{
auth: state.auth.login
}
}
export default connect(mapStateToProps)(ProfileScreen)
This is the component that contains my custom TextInput component
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView} from 'react-native';
import FlexibleInput from '../Components/profScreenComp/FlexInput'
class profTab extends Component {
render() {
return (
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.content}>
<FlexibleInput styles={styles.input} />
</View>
</ScrollView>
);
}
}
const styles= StyleSheet.create({
container:{
flex:1,
margin: 10,
padding: 10,
justifyContent:'center',
alignItems: 'center',
},
content:{
height: '100%',
width: '100%'
},
input:{
borderColor: 'red',
}
})
export default profTab
And finally my custom TextInput component
import React from 'react'
import {TextInput, StyleSheet} from 'react-native'
const flexibleInput = (props) => (
<TextInput
{...props}
style={[styles.input,props.styles]}
/>
)
const styles= StyleSheet.create({
input: {
width: "100%",
borderWidth: 1,
borderColor: "#eee",
padding: 5,
marginTop: 8,
marginBottom: 8
},
})
export default flexibleInput
Related
I upgraded react native application to react version 17.0.1 and react-native 0.68.2.
Modals are no longer visible on the iOS application beyond that point. I'm using the react-native-modal: "^13.0.1" library to create those modals.
To confirm the issue, I replaced sample modal code react-native-modal-example on top of my existing code. However, the problem is still present.
There is a bug reported like this
Therefore, I used modal provided by react-native instead of using react-native-modal: "^13.0.1" but the same problem is occurred.
Is there any solution for this?
my code as follows,
import React, {useState} from 'react';
import {Image, View, Text, TouchableOpacity, Alert, Pressable, StyleSheet} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Modal from 'react-native-modal'
const login = props => {
const [modalVisible, setModalVisible] = useState(false);
return (
<SafeAreaView style={styles1.centeredView}>
<Modal isVisible={true}>
<View style={styles1.centeredView}>
<View style={styles1.modalView}>
<Text style={styles1.modalText}>Hello World!</Text>
<Pressable
style={[styles1.button, styles1.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}>
<Text style={styles1.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<TouchableOpacity
style={[styles1.button, styles1.buttonOpen]}
onPress={() => setModalVisible(true)}>
<Text style={styles1.textStyle}>Show Modal</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
const styles1 = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen: {
backgroundColor: "#F194FF",
},
buttonClose: {
backgroundColor: "#2196F3",
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText: {
marginBottom: 15,
textAlign: "center"
}
});
export default (login);
This one works!
import React, { useState } from "react";
import {
Modal,
View,
Text,
TouchableOpacity,
Alert,
Pressable,
StyleSheet,
SafeAreaView
} from "react-native";
const Example = props => {
const [modalVisible, setModalVisible] = useState(false);
return (
<SafeAreaView style={styles1.centeredView}>
<Modal isVisible={true}>
<View style={styles1.centeredView}>
<View style={styles1.modalView}>
<Text style={styles1.modalText}>Hello World!</Text>
<Pressable
style={[styles1.button, styles1.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles1.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<TouchableOpacity
style={[styles1.button, styles1.buttonOpen]}
onPress={() => setModalVisible(true)}
>
<Text style={styles1.textStyle}>Show Modal</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
export default Example;
const styles1 = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
buttonOpen: {
backgroundColor: "#F194FF"
},
buttonClose: {
backgroundColor: "#2196F3"
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText: {
marginBottom: 15,
textAlign: "center"
}
});
I am trying to build a react native application with the expo, First I try to build this application with my chrome web browser, it was worked without any issue after that I try to test the application with my android device and I'm getting an exception - "Text strings must be rendered within a <Text> component" HomeScreen.js files. I have no idea why this happened. My code as follows,
/*This is an Example of Grid View in React Native*/
// import * as React from "react";
import React from 'react';
import { Image, FlatList, StyleSheet, View, Text, TouchableOpacity, TextInput } from 'react-native';
import { COLORS } from '../../asserts/Colors/Colors';
import { CATEGORIES } from '../../asserts/mocks/itemListData';
import CategoryGridTitle from '../components/HomeGridTile';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import { HeaderButton } from '../components/HeaderButton';
import HomeScreenButton from '../components/HomeScreenButton';
//import all the components we will need
const renderTopBarItems = (topBarItems) => {
return (
<TouchableOpacity
style={styles.topBar}>
<Text style={styles.textStyle}> {topBarItems.item.category} </Text>
</TouchableOpacity>
)
}
const HomeScreen = props => {
const renderGridItem = (itemData) => {
return <CategoryGridTitle
title={itemData.item.title}
image={itemData.item.image}
onSelect={() => {
props.navigation.navigate({
routeName: 'PaymentHandlerScreen',
params: {
categoryId: itemData.item.id
}
});
}} />;
}
// const [images, setImages] = React.useState(picsumImages);
return (
<View style={styles.mainBody}>
<View style={styles.searchContainer}>
<TextInput
placeholder='Search'
style={styles.formField}
placeholderTextColor={'#888888'}
/>
<TouchableOpacity onPress={() => props.navigation.navigate('BarCodeScannerScreen')}
style={styles.saveFormField}>
<Image
source={require('../../../images/barcode.png')}
style={{
width: '100%',
height: '30%',
resizeMode: 'contain',
alignContent: 'center',
}}
/> </TouchableOpacity>
</View>
<View style={styles.tabBar}>
<FlatList
horizontal
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => item.id}
data={CATEGORIES}
renderItem={renderTopBarItems} />
</View>
<FlatList
keyExtractor={(item, index) => item.id}
data={CATEGORIES}
renderItem={renderGridItem}
numColumns={3} />
<HomeScreenButton style={styles.buttonView} />
</View>
);
};
HomeScreen.navigationOptions = navigationData => {
return {
headerTitle: 'Tickets',
headerRight: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title='profile'
iconName='ios-star'
onPress={() => {
console.log('profile clicked');
}} />
<Item
title='more'
iconName='md-more'
onPress={() => {
console.log('more clicked');
}} />
</HeaderButtons>
)
};
};
export default HomeScreen;
const styles = StyleSheet.create({
mainBody: {
flex: 1,
justifyContent: 'center',
backgroundColor: COLORS.background,
paddingTop: '3%',
},
searchContainer: {
flex: 1,
flexDirection: 'row',
},
tabBar: {
paddingBottom: '3%',
},
topBar: {
width: 150,
borderWidth: 1,
borderRadius: 20,
borderColor: COLORS.primary_blue,
padding: '5%',
marginLeft: '5%',
},
textStyle: {
color: COLORS.primary_blue,
textAlign: 'center',
fontWeight: 'bold',
fontSize: 14,
},
formField: {
flex: 4,
borderWidth: 1,
padding: '4%',
marginLeft: '2%',
borderRadius: 10,
borderColor: COLORS.gray,
backgroundColor: COLORS.gray,
fontSize: 15,
height: '35%',
},
saveFormField: {
flex: 0.5,
justifyContent: 'space-between',
alignItems: 'center',
margin: 10,
},
buttonView: {
position: 'absolute',
bottom: 0,
left: 0,
},
});
Thank you.
I ran into this error a couple of times. RN doesn't like extra spaces in tags. try removing the spaces before and after {topBarItems.item.category}
<Text style={styles.textStyle}>{topBarItems.item.category}</Text>
I am new to react native and firebase. I want to make a search bar that can search all data from firebase according to Barcode value, but I'm facing some errors while doing it. I think that my code is wrong somewhere but don't know where. I have transferred the firebase credentials to dbConfig.js . Here is my firebase data firebase data and my code:
import React,{Component} from 'react';
import { View, Text,TextInput,StyleSheet,Image, Button} from 'react-native';
import firebase from './dbConfig';
export default class ListItem extends Component {
render() {
return (
<>
<View style={styles.BackGround}>
<View style={styles.SectionStyle}>
<Image
source={require('./mic.png')} //mic image here
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1, justifyContent: 'center', textAlign: 'center', fontSize: 12}}
placeholder="Search for Product"
underlineColorAndroid="transparent"
//onChangeText={(text) => this.setState({data: text})}
onSubmitEditing = {(text)=> this.setState({data: text})}
value = {this.state.data}
// onSubmitEditing={()=>this._search}
//onSubmitEditing={()=>this.componentWillMount}
/>
<Image
source={require('./usr.png')} //icon image here
style={styles.ImageStyle2}
/>
</View>
<View>
<Text>{this.state.items}</Text>
</View>
</View>
</>
);
}
constructor(props){
super(props);
this.state= {
items: '',
data: '',
};
}
componentWillMount(){
var ref = firebase.database().ref('/');
ref.child(this.state.data).on("value", snapshot =>{
console.log(snapshot.val().info.Price);
//if(snapshot.val().Price == this.state.data){
//this.setState({items: Object.values(snapshot.val())});
//}
//else{
//alert('there is problem');
//}
});
}
}
const styles = StyleSheet.create({
BackGround: {
backgroundColor: '#22abb6',
height: '100%'
},
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
// borderWidth: 0.8,
// borderColor: '#000',
shadowColor:'#176f75',
marginTop: 50,
height: 40,
borderRadius: 10,
margin: 10,
},
ImageStyle: {
padding: 10,
marginLeft: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
},
ImageStyle2: {
padding: 10,
marginLeft: 10,
marginRight: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
},
});
I did it by changing the follows:
//adding this in TextInput
onSubmitEditing = {this.componentWillMount}
//on changing the function compoundWillMount to async()
componentWillMount= async()=>{
I'm trying to put like a logo/picture in my app. I am already using BackgroundImage so I want to put Image on top of the background. Check my code below. Please help me figure it out.
import React from 'react';
import { StyleSheet, Text, View, ImageBackground, Image } from 'react-native';
export default class App extends React.Component {
render() {
return (
<ImageBackground source={require('./app/img/baky.jpeg')} style={styles.container}>
<View style={styles.inner}>
<Image source={require('./app/img/logo.png')} style={styles.logo}> </Image>
<Text style={styles.txt}> Hello!!!! </Text>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
inner: {
padding: '10%',
justifyContent: 'center',
flexDirection: 'row',
width: '100%',
height: '100%',
backgroundColor: 'rgba(255, 255, 255, .7)'
},
logo: {
width: 50,
height: 50
},
txt: {
color: 'black',
}
});
I am new to react native this is my first attempt in react native I was following a sample tutorial for the basic understanding of the code and other things I am following this raywenderlich's propertyfinder example, while implementing the first navigation example I am facing this issue:
undefined is not a function (evaluating 'this.props.renderScene(route,this)')
in my android device(Samsung J7) which I am using to run the app
Here is my index.android.js
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var SearchPage = require('./SearchPage');
var styles = ReactNative.StyleSheet.create({
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
},
container: {
flex: 1
}
});
class PropertyFinderApp extends React.Component {
render() {
return (
<ReactNative.Navigator
style={styles.container}
renderScene={this.renderScene}
initialRoute={{
component: SearchPage,
index:0,
title:"home"
}}/>
);
}
}
ReactNative.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp });`
and the SearchPage.js file(the other component which I am using):
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicator,
Image
} from 'react-native';
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
flowRight: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
searchInput: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC'
}
});
export default class SearchPage extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name, postcode or search near your location.
</Text>
<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
placeholder='Search via name or postcode'/>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Location</Text>
</TouchableHighlight>
</View>
);
}
}
module.exports = SearchPage;
I have no idea what I am doing wrong since I am a beginner in this any help will be appreciated, thanx in advance.
You for got to write renderScene function, see following example:
<ReactNative.Navigator
...
renderScene={this.renderScene.bind(this)} />
renderScene(route, navigationOperations, onComponentRef) {
switch(route.index) {
case 0:
return <SearchPage />
}
}