I have a project in which I want to add a button with the icon "+", but the touchable opacity is not working as a button, I click on it, and doesn't makes the opacity, and I console.log(), to see if the button is working and only the opacity feedback is the issue, but is not working as well.
This is my render:
render() {
if (this.props.onNetwork)
return (<Loader />);
const navigate = this.props.navigation.navigate;
const { solicitacoes } = this.props.solicitacoesStore;
return (
<View style={styles.container}>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<H2 style={styles.header2}>PROJETOS</H2>
<TouchableOpacity onPress={() => { console.log('puff') }}>
<Icon style={styles.icon} name='add' />
</TouchableOpacity>
</View>
<Divider color='black'/>
<ListaItens solicitacoes={solicitacoes} onPress={ this.goToDescritivo }/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
paddingHorizontal: metrics.width * 0.05,
paddingTop: metrics.height * 0.03
},
icon: {
fontSize: fonts.superbig * 1.5,
flex:1
},
divider: {
paddingHorizontal: 10
},
header2: {
fontWeight: 'bold',
marginVertical: 5,
flex: 1
},
});
Related
here is my code
App.js
import React from 'react'
import { Image, StyleSheet, TouchableOpacity, Dimensions, Text, View } from 'react-native'
import { scale, verticalScale } from "react-native-size-matters"
import { RFPercentage} from 'react-native-responsive-fontsize';
import { FlatList } from 'react-native';
const dummyData =
[{
title: 'Get instant loans with approvals',
uri: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWo3YRChZ3ADpZ7rEfQu1RvBOu9NMWZIMZBaH-a1CArXqx6nLX',//require('../img/1page.jpg'),
id: 1
},
// {
// title: 'Get money in wallet or bank account',
// uri: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQN0NcV2epN147CiVfr_VAwsbU3VO8rJU0BPphfU9CEsVWa-kRX',//require('../img/1page.jpg'),
// id: 2
// },
// {
// title: 'Refer & earn exciting gifts',
// uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUbS4LNT8rnIRASXO6LGFSle7Mhy2bSLwnOeqDMivYTb2cgTJg',//require('../img/1page.jpg'),
// id: 3
// }
]
const Home = ({ navigation }) => {
const renderItem=({item})=>{
return(
<View>
<Image source={{uri:item.uri}}style={styles.img} />
<View style={styles.dotView}>
<View style={styles.dot}/>
<View style={styles.dot}/>
<View style={styles.dot}/>
</View>
<Text style={styles.text}>{item.title}</Text>
</View>
)
}
return (
<View style={styles.contanier}>
<View style={styles.imgView}>
<Image source={require('../img/homelogo.png')} style={styles.logo} />
</View>
<View style={{marginBottom:8}}>
<FlatList
data={dummyData}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
<View style={styles.btnview}>
<TouchableOpacity style={styles.btn}
onPress={() => navigation.navigate("PermissionPage")}
>
<Text style={styles.btntext}>Get Started</Text>
</TouchableOpacity>
</View>
</View>
)
}
export default Home;
const styles = StyleSheet.create({
contanier: {
flex: 1,
backgroundColor: '#fff',
},
imgView: {
marginTop: verticalScale(10),
marginLeft: 20,
},
logo: {
width: scale(70),
height: verticalScale(70),
borderRadius: 50,
// position: 'absolute'
},
btnview: {
alignItems: 'center',
justifyContent: 'center',
marginTop:10,
},
btn: {
width: scale(250),
height: verticalScale(55),
borderRadius: 5,
backgroundColor: '#2192FF',
alignItems: 'center',
justifyContent: 'center',
},
btntext: {
fontSize: RFPercentage(3.20),// fontSize: RFValue(17, 680),
color: '#fff',
fontWeight: '600',
fontFamily: 'Roboto'
},
img:{
width:scale(300),
height:verticalScale(450),
},
text:{
fontSize:RFPercentage(3),
fontWeight:'bold',
color:'#000',
textAlign:'center'
},
dotView:{
flexDirection:'row',
justifyContent:'center',
marginBottom:8
},
dot:{
width:scale(8),
height:verticalScale(8),
backgroundColor:'#2192ff',
borderRadius:20,
marginLeft:5
}
})
here is output I want
https://imgur.com/a/yvR5XgM
I'm creating new app in app home page have auto scroll img but I don't know how to use it and do it
I'm fine some lib but i don't use any lib I want without lib.
I'm seen may qustion on internet but I'm not find soution what I want
any one can help me ?
I am trying to add some new items on a list but when i print the list on console log it adds the item but it shows me undefined of name and description. Apparantly there is something wrong with the inputs but I cannot figure out why.
Also on the app itself the it shows that a new item is added but without data.
import React ,{useState}from 'react';
import { KeyboardAvoidingView, StyleSheet,Text,View,TextInput,TouchableOpacity,Keyboard,ScrollView } from 'react-native';
import Task from './components/task';
export default function App(){
const [recipeName,setRecipeName]=useState("");
const [descriptionItem, setDescriptionItem] = useState("");
const [items, setItems] = useState([
{ itemName: "Chicken", description: "chicken test", id: 0 }
]);
const handleAddButtonClick = () => {
const newItem = {
itemName: recipeName, // change
descriptionItem: descriptionItem,
id: items.length
};
console.log(newItem);
const newItems = [...items, newItem];
setItems((state) => {
console.log(state);
console.log(newItems);
return newItems;
});
// setRecipeName("");
// setDescriptionItem("");
// console.log(items.description);
// console.log(items.id); //...
};
return(
<View style={styles.container}>
{/* Added this scroll view to enable scrolling when list gets longer than the page */}
<ScrollView
contentContainerStyle={{
flexGrow: 1
}}
keyboardShouldPersistTaps='handled'
>
{/* Today's Tasks */}
<View style={styles.tasksWrapper}>
<Text style={styles.sectionTitle}>Today's tasks</Text>
<View style={styles.items}>
{/* This is where the tasks will go! */}
{
items.map((item, index) => {
return (
<TouchableOpacity key={index} onPress={() => completeTask(index)}>
<Text>Recipe {item.itemName} Description: {item.description}</Text>
</TouchableOpacity>
)
})
}
</View>
</View>
</ScrollView>
{/* Write a task */}
{/* Uses a keyboard avoiding view which ensures the keyboard does not cover the items on screen */}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.writeTaskWrapper}
>
<View style={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<TextInput style={styles.input} placeholder={'Write a name'} value={recipeName} onChangeText={(text) => setRecipeName(text)} />
<TextInput style={styles.input} placeholder={'Write a date'} value={descriptionItem} onChange={(text) => setDescriptionItem(text)} />
</View>
<TouchableOpacity onPress={() => handleAddButtonClick()}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#E8EAED',
},
tasksWrapper: {
paddingTop: 80,
paddingHorizontal: 20,
},
sectionTitle: {
fontSize: 24,
fontWeight: 'bold'
},
items: {
marginTop: 30,
},
writeTaskWrapper: {
position: 'absolute',
bottom: 60,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center'
},
input: {
paddingVertical: 15,
paddingHorizontal: 15,
backgroundColor: '#FFF',
borderRadius: 60,
borderColor: '#C0C0C0',
borderWidth: 1,
width: 250,
},
addWrapper: {
width: 60,
height: 60,
backgroundColor: '#FFF',
borderRadius: 60,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#C0C0C0',
borderWidth: 1,
},
addText: {},
});
When iterating over items in your map() function here:
items.map((item, index) => {
return (
<TouchableOpacity
key={index}
onPress={() => completeTask(index)}
>
<Text>
Recipe {item.itemName} Description: {item.description}
</Text>
</TouchableOpacity>
);
})
You are not using the correct state value. Instead of item.description, it should be item.descriptionItem.
I also advise you to move onChange events to separate methods and set the state inside them, do not use anonymous functions. So, for example, for your description, it would be something like this:
const handleDescription = (e) => {
setDescriptionItem(e.target.value);
};
And in your JSX:
<TextInput
style={styles.input}
placeholder={"Write a date"}
value={descriptionItem}
onChange={handleDescription}
/>
UPDATE:
I recreated your code in sandbox, with minor changes:
commented out the import of Task component (since I don't know what that component does)
disabled onPress event handler as I don't have access to completeTask function
changed the onChangeText for recipeName to onChange
extracted both onChange events to separated methods.
fixed initial state for items; it also had description , instead of descriptionItem
Please, feel free to check it out.
I have been trying to update my screen dimensions in react native so that the component resizes on-screen rotation with no vain. I have created my style in a separate file (Styles.js) and imported the styles in my login page like below:
Styles.js
import {
StyleSheet,
Dimensions
} from "react-native";
import {
scale,
ScaledSheet
} from "react-native-size-matters";
const styles = ScaledSheet.create({
scrollViewContainer: {
backgroundColor: '#E20030',
alignItems: 'center',
height: Dimensions.get('window').height,
padding: '50#s'
},
container2: {
alignItems: 'center',
justifyContent: 'center',
width: Dimensions.get('window').width,
flex: 1,
},
loginRect: {
borderRadius: '30#s',
marginTop: '20#s',
width: Dimensions.get('window').width * 0.8,
backgroundColor: 'white',
alignItems: 'center'
},
SectionStyle: {
flexDirection: 'row',
marginTop: 0,
marginLeft: '35#s',
marginRight: '35#s',
borderWidth: '1#s',
borderRadius: '5#s',
borderColor: '#dadae8',
},
});
Login.js
import React, { } from 'react';
import {
Text, View, TextInput, TouchableOpacity,
KeyboardAvoidingView,
} from 'react-native';
import { mystyles, styles } from './Components/styles';
const LoginScreen = () => {
return (
<View style={mystyles.scrollViewContainer}>
<KeyboardAvoidingView behavior="padding" style={{ flex: 100 }}>
<View style={mystyles.scrollViewContainer}>
<View style={mystyles.loginRect}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, marginLeft: 45, marginTop: 20 }}>
<Text style={{ color: 'black' }}>Username</Text>
</View>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
/>
</View>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, marginLeft: 45, marginTop: 20 }}>
<Text style={{ color: 'black' }}>Password</Text>
</View>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
/>
</View>
<TouchableOpacity>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</View>
)
}
export default LoginScreen;
So I have tried using Dimensions onchange listener in my Styles.js but I get an error
ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I created this function in the Styles.js file
m
function getDimensions() {
const [dimensions, setDimensions] = useState({
window,
screen
});
useEffect(() => {
const subscription = Dimensions.addEventListener(
"change",
({
window,
screen
}) => {
setDimensions({
window,
screen
});
console.log(dimensions.window.height + " +++ " + dimensions.screen)
}
);
// return () => subscription?.remove();
});
return dimensions.window;
}
Is there any way I can update the component sizes once the screen has been rotated?
This is working for me to detect rotation or changes in the size of the screen (split mode in tablets for example) without eventListeners.
import { Dimensions } from "react-native";
...
useEffect(() => {
...
}, [Dimensions.get("screen").height, Dimensions.get("screen").width]);
Hope this help to anybody
Look at my code below please I am trying to find a way to make a delete button but i am very new to react native, i have been trying to do it for the past few hours.
import React, { useState } from 'react';
import { StyleSheet, FlatList, Text, View, Image, TextInput, Button, Keyboard, TouchableOpacity, CheckBox } from 'react-native';
import Interactable from 'react-native-interactable';
export default function App()
const [enteredGoal, setEnteredGoal] = useState('');
const [courseGoals, setCourseGoals] = useState([]);
const goalInputHandler = (enteredText) => {
setEnteredGoal(enteredText);
};
const addGoalHandler = () => {
if (enteredGoal.length > 0) {
setCourseGoals(currentGoals => [...currentGoals, enteredGoal])
} else {
alert("You have to write something!")
}
}
return (
<View style={styles.container}>
<View style={styles.topPart}></View>
<View style={styles.navBar}>
<Image source={require('./assets/baseline_menu_black_18dp.png/')} />
<Text style={styles.heading}> Grocery List </Text>
</View>
<View style={styles.body}>
<TextInput
style={styles.textInput}
placeholder='Groceries'
maxLength={20}
onBlur={Keyboard.dismiss}
value={enteredGoal}
onChangeText={goalInputHandler}
/>
<View style={styles.inputContainer}>
<TouchableOpacity style={styles.saveButton}>
<Button title="ADD" onPress={addGoalHandler} color="#FFFFFF" style={styles.saveButtonText} />
</TouchableOpacity>
</View>
<View style={styles.container}>
<FlatList
data={courseGoals}
renderItem={itemData => (
<View style={styles.groceryItem} >
<Text style={styles.groceryItemText}>{itemData.item}</Text>
<Text style={styles.groceryItemDelete}>X</Text>
</View>
)}
/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
topPart: {
height: '3%',
backgroundColor: '#5498A7',
},
navBar: {
height: '10%',
backgroundColor: '#5498A7',
elevation: 3,
paddingHorizontal: 15,
flexDirection: 'row',
alignItems: 'center',
},
body: {
backgroundColor: '#edebe9',
height: '100%',
flex: 1
},
heading: {
fontWeight: "bold",
justifyContent: 'center',
paddingLeft: '13%',
fontSize: 25,
color: '#d6d4d3'
},
textInput: {
borderColor: '#CCCCCC',
borderTopWidth: 1,
borderBottomWidth: 1,
height: 50,
fontSize: 25,
paddingLeft: 20,
paddingRight: 20
},
saveButton: {
borderWidth: 1,
borderColor: '#5498A7',
backgroundColor: '#5498A7',
padding: 15,
margin: 5,
},
saveButtonText: {
color: '#FFFFFF',
fontSize: 20,
textAlign: 'center'
},
groceryItem: {
borderWidth: 1,
borderColor: 'black',
backgroundColor: '#6A686B',
padding: 15,
margin: 5,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
},
groceryItemText: {
color: '#d6d4d3',
},
groceryItemDelete: {
color: 'red',
fontWeight: 'bold',
fontSize: 20
}
});
I hope you guys can find a solution I will keep u guys updated on my progress, I am constantly looking for answers but i don't really understand how to make the delete (X) work and to make it delete a different element, if you know a way to make work better just let me know i would appreciate it a lot
You have to send index to delete function.
renderItem={(itemData,index) => (
<View style={styles.groceryItem} >
<Text style={styles.groceryItemText}>{itemData.item}</Text>
<Text style={styles.groceryItemDelete.bind(index)}>X</Text>
</View>
and example delete function :
groceryItemDelete(index){
setCourseGoals(currentGoals.splice(index,1))
}
You need to implement the delete method and add an onPress event:
renderItem={(itemData, idx) => (
<View style={styles.groceryItem} >
<Text style={styles.groceryItemText}>{itemData.item}</Text>
<Text style={styles.groceryItemDelete} onPress={() => deleteItem(idx)}>X</Text>
</View>
)}
const deleteItem = idx => {
const clonedGoals = [...courseGoals]
clonedGoals.splice(idx, 1)
setCourseGoals(clonedGoals)
}
I'm trying to move the selection text to the far right on this Detail component. I've tried justifyContent on the View with the sideBySide style and alignSelf on the selectionStyle. I've tried various combinations but am not able to move the selection text to the far right, up until where the arrow might be. I feel like there's something simple I'm missing.
Here's what it looks like (Selection is not to the far right):
Thanks for any help!
const Detail = ({ onPress, selection, text, info }) => {
const wrapper = {
flex: 1,
paddingTop: 20,
paddingLeft: 16,
};
const sideBySide = {
flexDirection: 'row',
};
const textStyle = {
flex: 1.3,
fontWeight: '500',
fontSize: 12,
paddingRight: 5,
};
const selectionStyle = {
flex: 1,
color: 'blue',
fontWeight: '500',
fontSize: 12,
};
const infoWrapper = {
paddingTop: 8,
paddingBottom: 20,
};
return (
<ViewWrapper onPress={onPress} noArrow={true}>
<View style={wrapper}>
<View style={sideBySide}>
<Text style={textStyle}>
{text}
</Text>
<Text style={selectionStyle}>
{selection}
</Text>
</View>
<View style={infoWrapper}>
<Text style={subHeader}>
{info}
</Text>
</View>
</View>
</ViewWrapper>
);
};
const iconView = { position: 'absolute', right: 16 };
const icon = { color: 'gray', fontSize: 14 };
const ViewWrapper = ({ onPress, children, noArrow, style }) => {
const view = {
flexDirection: 'row',
alignItems: 'center',
paddingRight: Platform.OS === 'ios' && !noArrow ? 35 : 16,
backgroundColor: 'white',
};
return (
<TouchableHighlight underlayColor="#eee" onPress={onPress}>
<View style={[view, style]}>
{children}
{Platform.OS === 'ios' &&
!noArrow && (
<View style={iconView}>
<Icon name="arrow" style={icon} />
</View>
)}
</View>
</TouchableHighlight>
);
};
Remove flex: 1 from selectionStyle