React Native, <Image> can't contain children - javascript

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',
}
});

Related

How to make recording audio react-native

I have a project, just user tap in the button and it started recording. If user haven't speak, it stops, and if user tap at the same button, record stopped. Now it can storage in local path, but i hope in the futere i will requests this files in the server
The code:
import { StyleSheet, Text, View, Image, Pressable } from 'react-native'
import React from 'react'
import { useAuth } from '../AuthContext'
import { COLORS } from '../assets/colors/colors';
import Train_word from '../assets/images/Train_word.svg'
import Train_word_2 from '../assets/images/Train_word_2.svg'
const Train = () => {
const [user] = useAuth()
return (
<View style={styles.container}>
<View style={styles.header}>
<Image
source={require('../assets/images/Logo_small.png')}
style={styles.logo_s}
resizeMode='contain'/>
</View>
<View style={styles.main_cont}>
<Train_word marginBottom={34}/>
<Train_word_2 marginBottom={55}/>
<Pressable marginBottom={180}>
<Image
source={require('../assets/images/Start_img.png')}
style={styles.start_img}>
</Image>
</Pressable>
<Pressable style={styles.result}>
<Text style={styles.text_result}>Получить результат</Text>
</Pressable>
</View>
<Image
source={require('../assets/images/bottom_menu.png')}
style={styles.img_bg}/>
</View>
)
}
export default Train
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "rgba(243, 239, 239, 1)",
alignItems: 'center'
},
img_bg: {
width: 412,
height: 80,
},
logo_s: {
width: 100,
height: 100,
left: 150,
top: -130,
},
header: {
backgroundColor: 'transeparent',
flexDirection: 'row',
alignItems:'center',
height: 100,
paddingTop: 180,
paddingRight: 35
},
main_cont: {
alignItems: 'center',
top: -90,
flex: 1,
},
start_img: {
width: 286,
height: 286,
},
result: {
backgroundColor: 'transeparent',
width: 178,
height: 25,
alignItems: "center",
left: -63,
},
text_result: {
fontFamily: 'OpenSans-Italic',
color: COLORS.text,
fontSize: 16,
textDecorationLine: 'underline'
}
})
Thanks for everyone, i'm beginner in react native

How to vertically center Text in TouchableOpacity?

I am trying to vertically center Text in a TouchableOpacity but it is hard to get it done for me.
My App.tsx:
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, View } from "react-native";
import { CustomButton } from "./src/components/CustomButton";
export default function App() {
return (
<View style={styles.container}>
<CustomButton title="Button" />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
And my CustomButton.tsx:
import React from "react";
import {
TouchableOpacity,
StyleSheet,
Text,
} from "react-native";
interface CustomButtonProps {
title: string;
}
export const CustomButton = ({ title }: CustomButtonProps): JSX.Element => {
return (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonTitle}>{title}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
borderRadius: 4,
width: 240,
height: 100,
backgroundColor: "#FFF",
marginBottom: 12,
},
buttonTitle: {
alignSelf: "center",
fontSize: 24,
color: "#fff",
fontWeight: "bold",
},
});
Currently I set alignSelf in buttonTitle as 'center' but I have also tried:
textAlign: 'center' in buttonTitle,
alignItems: 'center' in button,
alignItems: 'center', justifyContent: 'center' in button
And many other ways I could find on Google but none of them worked. It only centers the Text horizontally. Can anyone help me with vertically centering Text of this TouchableOpacity component?
Thanks in advance!
Have a try by using textAlign: 'center' in the style of the text component.
also, you can refer to the official docs from here.
React native Text Compoent
Problem solved:
React Native's default direction is column which is different than the web.
Thus, what I needed is to add justifyContent: "center" within the button styles, so the code looks like:
const styles = StyleSheet.create({
button: {
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
width: 240,
height: 100,
backgroundColor: "#FFF",
marginBottom: 12,
},
buttonTitle: {
fontSize: 24,
color: "#fff",
fontWeight: "bold",
},
});
Hope it helps those who encounter the same problem!

Unable to import files

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

Place Element over TextBox

I am trying to place an Avatar element over my TextInput so that it will look like a conventional search bar, but it doesn't go over the TextInput Please isn't it working, or can another better method of putting the search icon over the TextInput be suggested, Thank you
import { Avatar } from 'react-native-elements';
import FontAwesome
from './node_modules/#expo/vector-icons/fonts/FontAwesome.ttf';
import MaterialIcons
from './node_modules/#expo/vector-icons/fonts/MaterialIcons.ttf';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {timePassed: false};
}
state = {
fontLoaded: false
};
async componentWillMount() {
try {
await Font.loadAsync({
FontAwesome,
MaterialIcons
});
this.setState({ fontLoaded: true });
} catch (error) {
console.log('error loading icon fonts', error);
}
}
render() {
setTimeout(() => {
this.setState({timePassed: true})
}, 4000);
if (!this.state.timePassed) {
return <Splash/>;
} else {
return (
<View style={BackStyles.container}>
<Avatar style={BackStyles.searchIcon} icon={{ name: 'search', size: 25, }}/>
<TextInput placeholder="Search for your herbs.."
underlineColorAndroid={'transparent'} style={BackStyles.textBox}
/></View>
);
}
}
}
const BackStyles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'flex-start',
alignSelf: 'stretch',
flex: 1,
backgroundColor: '#E2E2E2',
marginTop: 20,
// width: '100%'
},
textBox: {
flex: 1,
height: 45,
padding: 4,
// textAlignVertical: 'top',
paddingLeft: 20,
// marginRight: 5,
flexGrow: 1,
// fontSize: 18,
color: '#000',
backgroundColor: '#fff',
// textAlign: 'center'
},
searchIcon:{
position: 'absolute',
alignSelf: 'stretch',
height: 45,
flex: 1,
top: 50,
flexGrow: 1,
padding: 4
}
});
You can use Flexbox's justifyContent feature to force the TextInput to the left and the search icon to the right. If you put a border on the container and not the TextInput, the entire thing will appear as there is a search icon fixed onto the right of the TextInput, when, in reality, they are two separate components.
// styles
const styles = StyleSheet.create({
searchBox: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderWidth: 1,
borderColor: 'black',
},
});
// the component
<View style={styles.searchBox}>
<TextInput ...yourprops />
<Avatar ...yourprops />
</View>
If you want to read more about justifyContent and how godly Flexbox is, you should check out Chris Coyier's Flexbox guide.

React Native undefined is not a function error

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 />
}
}

Categories