My button is overwriting my text, not respecting my flex.
The button should be at the bottom after the text, below the input texts.
Can you help me with this?
import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';
export default props => (
<View style={{ flex: 1, padding: 10 }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',marginTop: 30 }}>
<Text style={{ fontSize: 25 }}>Teste</Text>
</View>
<View style={{ flex: 2}}>
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='E-mail' />
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
<Text style={{ fontSize: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
</View>
<View style={{ flex: 2}}>
<Button title="Acessar" color='#115E54' onPress={() => false} />
</View>
</View>
);
I have Tested In Android Platform It's Working Fine.
render() {
return (
<View style={{ flex: 1, padding: 10 }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
<Text style={{ fontSize: 25 }}>Teste</Text>
</View>
<View style={{ flex: 2 }}>
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='E-mail' />
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
<Text style={{ fontSize: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
</View>
<View style={{ flex: 2 }}>
<Button title="Acessar" color='#115E54' onPress={() => false} />
</View>
</View>
);
}
I think your code will be like:
<View style={{ flex: 1, padding: 10 }}>
<Text style={{ fontSize: 25, alignSelf : 'center', marginTop: 30 }}>Teste</Text>
<TextInput style={{ fontSize: 20, height: 45, marginTop: 20 }} placeholder='E-mail' />
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
<Text style={{ fontSize: 20, marginTop: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
<View style={{marginTop: 20}}>
<Button title="Acessar" color='#115E54' onPress={() => false} />
</View>
</View>
I hope this code will be helpful.
Related
I have a textinput. In this textinput, I have a letter "O" as an icon. I want textinput to be clickable when I press on "O" letter, how could i do that?
For now it doesn't work, since i couldnt add this property to that letter. I added how my textinput looks in the app. Thank you in advance.
Here is the App.js
import React, { useState } from 'react';
import { TouchableWithoutFeedback, StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView, TouchableHighlight } from 'react-native';
import Application from "../icons/application.svg"
import HorizontalCircles from '../HorizontalCircles';
import HorizontalDiscussion from "../HorizontalDiscussion";
import Energy from "../icons/energy.svg"
import Add from "../icons/add.svg"
import Calendar from "../icons/calendar.svg"
import Clock from "../icons/clock.svg"
const MainScreen = ({ navigation }) => {
const [text, setText] = useState("");
return (
// for ios, i add safeareview and flex:1, otherwise height doesnt become 100%
<SafeAreaView style={{flex:1,}} >
<View style={styles.container}>
<View style={styles.appIcon}>
<Application height={30} width={22} fill={"#1E2439"} />
<View style={{ height: 30, width: 30, backgroundColor: "#DBF1F9", borderRadius: 20 }} />
</View>
<View style={[styles.input,{ flexDirection: "row", alignItems: "center" }]}>
<TouchableWithoutFeedback onPress={onfocus(TextInput)}>
<Text style={{ marginLeft: 5 }}>O</Text>
</TouchableWithoutFeedback>
<TextInput style={{ flex: 1 }} placeholder="Search" placeholderTextColor="#B9B9C5" onChangeText={setText} value={text}></TextInput>
</View>
<Text>{text}</Text>
<View style={{ height: 120 }}>
<ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems: "center" }} horizontal={true}>
<View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight: 10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
<HorizontalCircles colorFirst={"#CFC8FF"} colorSecond={"#4CC98F"} />
<HorizontalCircles colorFirst={"#FFA2BF"} colorSecond={"#FFD24D"} />
<HorizontalCircles colorFirst={"#FEE3AA"} colorSecond={"#4DC98F"} />
<HorizontalCircles colorFirst={"#FEDFCC"} colorSecond={"#B3C2D8"} />
<HorizontalCircles colorFirst={"#FFA2BF"} colorSecond={"#FF3FFF"} />
<HorizontalCircles colorFirst={"#F3A5FF"} colorSecond={"#1CB28F"} />
<HorizontalCircles colorFirst={"#EFBCFF"} colorSecond={"#22398F"} />
<HorizontalCircles colorFirst={"#AFBFCF"} colorSecond={"#44798F"} />
<HorizontalCircles colorFirst={"#AEDF5F"} colorSecond={"#98C98F"} />
<HorizontalCircles colorFirst={"#DDB825"} colorSecond={"#359424"} />
</ScrollView>
</View>
{/* Discussion Part */}
<Text style={styles.blackText}>Group Discussion On Going</Text>
<View style={{ height: 250 }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexDirection: "row", alignItems: "center", }}>
<HorizontalDiscussion color={"#FFF9F2"} />
<HorizontalDiscussion color={"#E7FBFF"} />
</ScrollView>
</View>
<Text style={styles.blackText}>Todays Task</Text>
{/* Task Part */}
<ScrollView style={{ height: 300 }}>
<View style={{ padding: 30 }}>
<View style={styles.task}>
<View style={{ backgroundColor: "#FFEFE2", padding: 10, borderRadius: 13 }}>
<Energy height={35} width={25} fill={"#FB9238"} />
</View>
<View style={{ marginLeft: 15, flex: 1 }}>
<Text style={styles.blackText}>8 Tasks Today</Text>
<Text style={styles.grayText}>Meet them & Share your experience</Text>
</View>
<View style={{ marginLeft: 5 }}>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</View>
<View style={styles.task}>
<View style={{ backgroundColor: "#FEF8E6", padding: 10, borderRadius: 13 }}>
<Calendar height={35} width={25} fill={"#FCC626"} />
</View>
<View style={{ marginLeft: 15, flex: 1 }}>
<Text style={styles.blackText}>Event</Text>
<Text style={styles.grayText}>Create & Share Event</Text>
</View>
<TouchableHighlight onPress={() => navigation.navigate("NewScreen")}>
<View>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</TouchableHighlight>
</View>
<Text style={styles.blackText}>Proposed classes</Text>
<View>
<Text style={{ color: "#9993D3", fontSize: 18 }}>Math class</Text>
<View style={styles.proposed}>
<Text style={{ color: "#706E80", fontSize: 20 }}>Rasyid Hilman</Text>
<View style={{ height: 35, width: 35, backgroundColor: "#FEE3AA", borderRadius: 25, marginHorizontal: 10, }} />
</View>
<View style={styles.proposed}>
<View style={styles.agendaClockSvg}>
<Calendar height={40} width={30} fill={"#D4D3DA"} />
<Text style={{ color: "#B0AFB7", fontSize: 18, marginLeft: 10 }}>August 16, 2021</Text>
</View>
<View style={styles.agendaClockSvg}>
<Clock height={40} width={30} fill={"#C0BFC6"} />
<Text style={{ color: "#AFAEB8", fontSize: 18, marginLeft: 10 }}>15:00</Text>
</View>
</View>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: "#FFFFFF",
},
appIcon: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
input: {
height: 40,
borderWidth: .5,
borderRadius: 10,
marginVertical: 10,
backgroundColor: "#F7F6F9",
marginVertical: 20,
},
blackText: {
fontSize: 20,
fontWeight: "bold",
},
grayText: {
color: "#A29E97",
fontSize: 17,
},
task: {
flexDirection: "row",
alignItems: "center",
marginBottom: 15,
justifyContent: "space-between"
},
proposed: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
},
agendaClockSvg: {
flexDirection: "row",
alignItems: "center",
}
});
export default MainScreen;
Here is my textinput:
You can use the useRef hooks from react to focus any element. You just have to create a new Ref and then assign it to <TextInput /> and onPress on any element you can just focus that input ref using inputRef.current.focus()
const MainScreen = ({ navigation }) => {
const inputRef = useRef();
const [text, setText] = useState("");
...
...
<TouchableWithoutFeedback onPress={() => {inputRef.current.focus()}}>
<Text style={{ marginRight: 25 }}>O</Text>
</TouchableWithoutFeedback>
<TextInput style={{ flex: 1 }} placeholder="Search" placeholderTextColor="#B9B9C5" onChangeText={setText} value={text} ref={inputRef}></TextInput>
...
I have a problem when try to render a large Component, about more than 300 code lines, and the use Effect() function does not work. I use use Effect() to load data, and storage to state. When I remove all the components that use the state , it works again, after that, I add one by one child component, it still works until about 4 components and take error again. damn, I spend 8 hours to fix and fail. there is my code, I rewrote and you can copy paste it to test. Thanks for your help.
import React, { useEffect, useState } from 'react'
import {
View,
Text,
TouchableOpacity,
ScrollView,
Image,
StyleSheet,
} from 'react-native'
import axios from 'axios'
const HomeDetail = () => {
const icon = { uri: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.iconfinder.com%2Ficons%2F211614%2Farrow_b_down_icon&psig=AOvVaw1MEXG4kbEmt_x8DBErEnbI&ust=1617875579779000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCMCKyqvu6-8CFQAAAAAdAAAAABAD' }
const [data, setData] = useState({})
const [showDescription, setShowDescription] = useState(false)
const [showNearbySchools, setShowNearbySchools] = useState(false)
const [titleNameInput, setTitleNameInput] = useState(false)
const [titleEmailInput, setTitleEmailInput] = useState(false)
const [titlePhoneInput, setTitlePhoneInput] = useState(false)
const [showFooterTab, setShowFooterTab] = useState(false)
const [timeOnRealtor, setTimeOnRealtor] = useState()
useEffect(() => {
const getData = () => {
const options = {
method: 'GET',
url: 'https://realtor.p.rapidapi.com/properties/v2/detail',
params: { property_id: 'R4061264803' },
headers: {
'x-rapidapi-key': '7abe4815e1msh8ad18eb0e589c4cp1fc2e5jsn96386487842d',
'x-rapidapi-host': 'realtor.p.rapidapi.com'
}
};
axios.request(options).then(function (response) {
setData(response.data.properties[0])
}).catch(function (error) {
console.error(error);
});
}
getData();
}, [])
const TextLink = (prop) => {
styles = prop.style ? prop.style : {}
textDecorationLine = prop.underLine ? 'underline' : 'none'
return (
<Text
style={[styles,
{
color: prop.color,
fontSize: prop.fontSize,
textDecorationLine: textDecorationLine
}
]}
onPress={prop.onPress}
>
{prop.text}
</Text>
)
}
const ButtonCustom = (prop) => {
colorText = prop.type ? prop.color : 'red';
colorBackground = prop.type ? 'white' : prop.color;
return (
<TouchableOpacity
style={[prop.style,
{
justifyContent: 'center',
alignItems: 'center',
height: 35,
paddingLeft: 10,
paddingRight: 10,
borderWidth: 1,
borderRadius: 30,
borderColor: prop.color,
backgroundColor: colorBackground,
}
]}
onPress={prop.onPress}
>
<Text style={{
color: colorText,
fontSize: prop.fontSize,
// fontWeight: 'bold',
}}
>
{prop.text}
</Text>
</TouchableOpacity>
)
}
return (
<ScrollView>
<View>
<TextLink text='aaaaaa' color='blue'></TextLink>
</View>
{/* <View style={{ paddingRight: 10, paddingLeft: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ fontWeight: 'bold', fontSize: 22 }}>${data.price ? data.price : 5}/mo</Text>
<View style={{ flexDirection: 'row' }}>
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
</View>
</View>
<Text>{data?.address?.line ? data.address?.line : '---'}, {data?.address.city ? data?.address.city : '--'}, {data?.address.state_code ? data.address.state_code : '--'} {data?.address.postal_code ? data.address.postal_code : '--'}</Text>
</View> */}
{/*<View style={{ paddingRight: 10, paddingLeft: 10 }}>
<View style={{
flexDirection: 'row',
width: '100%',
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>{data?.beds}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>beds</Text>
</View>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }} >{data?.baths}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>baths</Text>
</View>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>{data?.sqft ? data?.sqft : '--'}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>sqrt</Text>
</View>
<View style={{ paddingRight: 5, marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>
{data?.client_display_flags.allows_cats | data?.client_display_flags.allows_dogs | data?.client_display_flags.allows_dogs_small | data?.client_display_flags.allows_dogs_large ? 'Yes' : 'No'}
</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>pet</Text>
</View>
</View>
<TextLink text='How much home can you afford ?' color='blue' />
<View style={{}}>
{data?.listing_status ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>{data?.listing_status}</Text>
</View>) : null
}
{data?.prop_type | data?.prop_status ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={.icon} />
<Text>{data?.prop_type, data?.prop_status}</Text>
</View>) : null
}
{timeOnRealtor ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>{timeOnRealtor} ons realtor.com®</Text>
</View>) : null
}
{data?.year_built ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>Built in {data?.year_built}</Text>
</View>) : null
}
{1 ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>style
<TextLink text='ASK AGENT' color='blue' />
</Text>
</View>) : null
}
</View>
<TextLink text='MORE DETAILS' color='blue' />
<ButtonCustom text='EMAIL AGENT' color='red' />
</View>
<View style={{ padding: 10, borderColor: 'gray', borderTopWidth: 1, borderBottomWidth: 1 }}>
<TextLink text='SEE MORE ABOUT THIS BUILDING' color='blue' />
</View>
<TouchableOpacity
style={{ padding: 10 }}
onPress={() => setShowDescription(!showDescription)}
>
<Text>Description</Text>
{showDescription ?
(<Text numberOfLines={1} >{data?.description}</Text>) :
(<View>
<Text >{data?.description}</Text>
<TextLink text='MORE' color='blue' />
</View>)
}
<Image style={{
height: 20,
width: 20,
position: 'absolute',
right: 0,
top: showDescription ? 20 : 30,
}}
source={showDescription ? icon : icon}
/>
</TouchableOpacity>
<TouchableOpacity
style={{
padding: 10,
borderBottomColor: 'gray',
borderTopColor: 'gray',
borderWidth: 1,
}}
onPress={() => setShowNearbySchools(!showNearbySchools)}
>
<Text>Nearby Schools</Text>
{showNearbySchools ?
(<Text > Ratings: Elementary {data?.ratings.great_schools_rating} High {data?.ratings.parent_rating}</Text>) :
(<View>
{data?.schools.map((item, index) => {
if (index < 3) {
return (
<View
key={index}
style={{
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 10,
paddingBottom: 10,
borderBottomWidth: index == 3 ? 1 : 0,
borderBottomColor: 'gray'
}}>
<View style={{ flexDirection: 'row' }}>
<View style={{
height: 40,
width: 40,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 3,
borderColor: item.ratings.great_schools_rating ? 'green' : 'gray',
borderRadius: 40,
}}>
{item.ratings.great_schools_rating ?
(<Text style={{ fontWeight: 'bold' }}>{item.ratings.great_schools_rating}
<Text>/10</Text>
</Text>) : (<Text style={{ fontWeight: 'bold' }}>Not Rated</Text>)
}
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
<Text>{item.funding_type} Grades
<Text style={{ fontWeight: 'bold' }}>{item.grades.range.low} - {item.grades.range.high}</Text>
</Text>
</View>
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>{item.distance_in_miles}</Text>
<Text>mi.</Text>
</View>
</View>
)
}
;
})}
</View>)
}
<Image style={{
height: 20,
width: 20,
position: 'absolute',
right: 0,
top: showNearbySchools ? 20 : 30,
}}
source={showNearbySchools ? icon : icon}
/>
</TouchableOpacity>
<View style={{ paddingRight: 10, paddingLeft: 10 }}>
<Text style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
Additional Info
</Text>
<View style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<Text style={{ fontWeight: 'bold' }}>Presented By</Text>
<TextLink text={data?.agents.name} color='blue' />
</View>
<View style={{
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: 'gray'
}}>
<Image
style={{ height: 50, width: 100 }}
source={{ uri: data?.office.photo.href }} />
<View style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<Text style={{ fontWeight: 'bold' }}>Brokered By</Text>
<TextLink text={data?.office.name} color='blue' />
<TextLink text={data?.office.advantage_phone.display_number} color='blue' />
</View>
<View>
<View style={{ flexDirection: 'row' }}>
<Text>Source {data?.mls.name}</Text>
<Text style={{ backgroundColor: 'gray' }}>property ID {data?.mls.id}</Text>
</View>
</View>
</View>
<View style={{ flexDirection: 'row', padding: 10 }}>
<Image style={{ height: 10, width: 10 }} source={icon} />
<Text>Be aware of scrams. Situations like wire transfers are red flags.
<TextLink text=' Read More' color='blue' />
</Text>
</View>
</View>
{
data.photo ?
(<Image style={{ width: '100%', height: 100 }} source={data.photo[0].href} />)
: null
}
<View style={{ padding: 10 }}>
<Text style={{ fontSize: 20, marginBottom: 10 }}>More about this property</Text>
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
<Image source={icon} />
<TextLink text={data.building_href} color='blue' />
</View>
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
<Text style={{ fontWeight: 'bold', marginRight: 10 }}>Move in</Text>
<Text>2021-04-20</Text>
<Image style={{ height: 10, width: 10, marginLeft: 10 }} source={icon} />
</View>
<View>
{titleNameInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Name</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Name'
onPressIn={() => setTitleNameInput(true)}
onPressOut={() => setTitleNameInput(false)}
/>
</View>
<View>
{titleEmailInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Email</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Email'
onPressIn={() => setTitleEmailInput(true)}
onPressOut={() => setTitleEmailInput(false)}
/>
</View>
<View>
{titlePhoneInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Phone</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Phone'
onPressIn={() => setTitlePhoneInput(true)}
onPressOut={() => setTitlePhoneInput(false)}
/>
</View>
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
defaultValue='I am interesting in ...'
/>
<View style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 10
}}>
<ButtonCustom text='EMAIL AGENT' type={false} />
<Text> or </Text>
<ButtonCustom Text='CALL AGENT' type={false} />
</View>
<Text>by proceeding ...
<TextLink text='More...' color='blue' />
</Text>
</View>
{showFooterTab ?
(<View style={{
justifyContent: 'center',
alignItems: 'center',
padding: 5,
}}>
<ButtonCustom text='EMAIL AGENT' color='red' type={false} />
<View>
<TextLink text='<' />
<Text>1/200</Text>
<TextLink text='>' />
</View>
</View>)
: null
} */}
</ScrollView>
)
}
export default HomeDetail
const style = StyleSheet.create({
image: {
height: 20,
width: 20,
resizeMode: 'cover',
}
})
oh sorry everyone because of this fundamental error, I misunderstood that the useEffect() is run before render function. I did not create a default state, so when it render, it can take a default value and make an error, and the effect function can run to put data to state :) Thank for reading my problem
Both the header and the chat container move-up when I start typing some message.
I have tried to use KeyboardAvoidingView inside my view container, however, it did not work, I'm not sure if the KeyboardAvoidingView is the best solution to control the keyboard inside the view and not familiar with it.
Below is my code:
render() {
const { myName, user, nome, message } = this.props;
return (
<View style={STYLES.main}>
<Animatable.View
style={STYLES.container}
animation={FADEIN}
easing='ease-in'
duration={1000}
>
<RenderHeader3 press={() => Actions.detalhes()} hcolor={'#298CFF'} color={'#FFF'} text={nome} icon={null} isize={null} />
<ScrollView contentContainerStyle={{ paddingHorizontal: 10, paddingTop: 5 }}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={null}
keyboardVerticalOffset={60}
>
<ListView
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
</KeyboardAvoidingView>
</ScrollView>
<View style={{ flexDirection: 'row', backgroundColor: '#1A1C27', padding: 10 }}>
<View style={{ flex: 4 }}>
<TextInput
style={[STYLES.titleTxt, { color: '#000', backgroundColor: '#FFF', borderRadius: 40, paddingLeft: 13, paddingRight: 10 }]}
multiline
value={message}
onChangeText={(texto) => this.props.modificaMensagem(texto)}
/>
</View>
<View style={{ justifyContent: 'center', alignItems: 'center', paddingLeft: 10 }}>
<TouchableOpacity
style={{
height: 40,
width: 40,
borderRadius: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#298CFF',
paddingRight: 2
}}
activeOpacity={0.5}
onPress={() => this.props.createChat(myName, user, nome, message)}
>
<CustomIcon
name='paper-plane'
size={25}
color='#FFF'
/>
</TouchableOpacity>
</View>
</View>
</Animatable.View>
</View>
);
}
}
make this changes
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior="height"
keyboardVerticalOffset={60}
>
source
KeyboardAvoidingView has 3 types of behavior enum('height','position','padding') but you set it to null in your code.
Secondly you have not added KeyboardAvoidingView in with TextInput component
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={'height'}
keyboardVerticalOffset={60}
>
Im trying to make this view with a bubble image in the margin between the left of the screen and the larger square images like the picture below
but my bubble will not stay in line with the view and
I get this
`
const Recipe = ({ name, durationLabel, numberOfServings, handlePress, handlePush }) => (
<View styles={{flexDirection: 'row'}}>
<TouchableHighlight onPress={handlePush}>
<View syle={{ justifyContent:'center'}}>
<Image
source={require("app/assets/icons/bubbleOff.png")}
style={{justifyContent:'center'}}
/>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={handlePress}>
<View style={styles.recipeTile}>
<Image
source={require("app/assets/cheesecake.png")}
style={styles.recipeImage}
/>
<View style={styles.recipeInfo}>
<View style={styles.recipeNameRow}>
<Text style={styles.recipeName}>{name}</Text>
<Image
style={{ marginRight: 10 }}
source={require("app/assets/icons/heart.png")}
/>
</View>
<View style={styles.recipeStatsRow}>
<Text style={styles.recipeStats}>
{durationLabel}
{' '}
| Serves
{' '}
{numberOfServings}
</Text>
</View>
</View>
</View>
</TouchableHighlight>
</View>
);`
my styles
`
recipeTile: {
flexDirection: "row",
flex: 1,
margin: 10,
backgroundColor: "white",
marginLeft:60,
},
recipeImage: {
width: 100,
height: 100
},`
Use justifyContent: 'center' and alignItems: 'center' to align the image center.
const Recipe = ({
name,
durationLabel,
numberOfServings,
handlePress,
handlePush,
}) => (
<TouchableHighlight onPress={handlePush}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 0, justifyContent: 'center', alignItems: 'center', marginLeft: 5, marginRight: 5 }}>
<Image
source={require('assets/bubbleOff.png')}
style={{ height: 20, width: 20 }}
/>
</View>
<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#FFF' }}>
<View style={{ flex: 0 }}>
<Image
source={require('assets/cheesecake.png')}
style={styles.recipeImage}
/>
</View>
<View style={{ flex: 1 }}>
<Text style={styles.recipeName}>{name}</Text>
<Text style={styles.recipeStats}>
{durationLabel} | Serves {numberOfServings}
</Text>
</View>
<Image
style={{
marginRight: 10,
height: 20,
width: 20,
position: 'absolute',
right: -20,
top: 30,
}}
source={require('assets/heart.png')}
/>
</View>
</View>
</TouchableHighlight>
);
Working demo
render() {
return (
<View style={{ flex: 1}}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'10%',backgroundColor: '#BE6507',padding:10}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25}} source={require('../assets/back.png')} />
</TouchableWithoutFeedback>
<View/>
<View/>
{/*main content*/}
<ScrollView style={{padding:20,paddingTop:25 }}>
<View style={{alignItems:'center',marginBottom:20, width:Dimensions.get('window').width * 90 / 100}}>
<Image style={{height:"30%",width:"90%",marginBottom:10}} source={require("../assets/logo.png")}/>
<Text style={{fontSize: 21, color: "black",margin:6,marginBottom:25}}>ADD CARD DETAILS</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={(nameoncard) => this.setState({ nameoncard:nameoncard })}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={(card_num) => this.setState({ card_num:card_num})}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity style={{width:'90%',margin:10,backgroundColor:'black',padding:10,borderRadius:5,borderWidth:1,marginTop:20,marginBottom:20,height:45}}>
<Text style={{fontSize: 19,fontWeight: 'bold', color: "white", textAlign:'center'}}>Proceed to Pay</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
In above code firstly i made a header for navigation.I want content below header to be scrollview.But above code does not seems to work and after half side of screen in vertical direction i does not see any views? What i am doing wrong here? How can i make scrollview to work correctly in above code?
You can try scrollEnabled with this.
First of all in your return of render() method you can have just one child. So, wrap the View and the ScrollView in a single View. You've also typos in the first section, look at how you're closing those Views: <View/> instead of </View>.
The correct code should be:
return (
<View style={{ flex: 1 }}>
{/*for header*/}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
height: '10%',
backgroundColor: '#BE6507',
padding: 10,
}}>
<TouchableWithoutFeedback
onPress={() => this.props.navigation.goBack()}>
<Image
style={{ width: 25, height: 25 }}
source={require('../assets/back.png')}
/>
</TouchableWithoutFeedback>
</View>
{/*main content*/}
<ScrollView style={{ padding: 20, paddingTop: 25 }}>
<View
style={{
alignItems: 'center',
marginBottom: 20,
width: (Dimensions.get('window').width * 90) / 100,
}}>
<Image
style={{ height: '30%', width: '90%', marginBottom: 10 }}
source={require('../assets/logo.png')}
/>
<Text
style={{
fontSize: 21,
color: 'black',
margin: 6,
marginBottom: 25,
}}>
ADD CARD DETAILS
</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={nameoncard =>
this.setState({ nameoncard: nameoncard })
}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={card_num => this.setState({ card_num: card_num })}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity
style={{
width: '90%',
margin: 10,
backgroundColor: 'black',
padding: 10,
borderRadius: 5,
borderWidth: 1,
marginTop: 20,
marginBottom: 20,
height: 45,
}}>
<Text
style={{
fontSize: 19,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
}}>
Proceed to Pay
</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);