I am Still New on react-native ,
So what I am tried is make a simple app that
has button when press on it just open alert
as this Code
class MyFirstReactapril extends Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}> Welcome Nesreen</Text>
<TouchableHighlight style={styles.button} onPress={this.showAlert}>
<Text style={styles.buttonText}>Myalert</Text>
</TouchableHighlight>
</View>
)
}
showAlert(){
Alert.alert('Fast Donation','', [{text : 'Donate now'},{text : 'add to Container'}])
}
}
Now I want to open Modal on button click not just alert
I tried to read this
http://facebook.github.io/react-native/docs/modal.html#content
but I really lost
how can I make modal using react-native ?
You can use modal something like below.
<Modal visible={this.state.isModalOpen}
onRequestClose={() => this.setState({isModalOpen: false})} animationType={"slide"}
transparent={false}>
<View>
//Create your modal view inside this
</View>
</Modal>
In your showAlert() method set isModalOpen as true in your state.
Related
I'm building this beginner react-native application that lists down its ongoing tasks and also allows users to delete the tasks when needed. I was already able to show each task but I can't figure out how to add a delete button for every task added.
Below is the code that I have come up with but I haven't been able to make a delete button for each task yet.
export default function App() {
const [newTask,setNewTask] = useState();
const [taskList,setTaskList] = useState([]);
const convertedTaskList = taskList.map((toDoTask,index)=>({
id: index+1,
activity:toDoTask,
status:'complete'
}))
function addTodoHandler(){
setTaskList([...taskList,newTask])
}
return (
<View style={styleSheet.container}>
<View style={styleSheet.contentContainer}>
<View>
<Text style={styleSheet.sectionTitle}>TO-DO LIST</Text>
</View>
<View style={styleSheet.taskContainer}>
{taskList.map((task)=><Text key={task}>{task}</Text>)}
</View>
</View>
<View style={styleSheet.addTaskWrapper}>
<TextInput placeholder="Enter Task" onChangeText={(enteredText)=>setNewTask(enteredText)}/>
<Button title="Add Task" onPress={addTodoHandler}/>
</View>
</View>
);
}
Is there a way for me to make an output just like the picture I attached through the link below?
Task w/ Delete Buttons
Try to add it in the map:
<View style={styleSheet.taskContainer}>
{taskList.map((task, index)=> (
<>
<Text key={task}>{task}</Text>
<Button title="Delete" onPress={() => setTaskList((prev) => prev.slice(index, 1))} />
</>
))}
</View>
I have two buttons to do two actions, is it possible to have only one button that should change the text and the actions that it does?
<TouchableOpacity style={styles.button} onPress={() => this.stopFunction()}>
<Text style={styles.buttonTesto}>STOP</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => this.startFunction()}>
<Text style={styles.buttonTesto}>START</Text>
</TouchableOpacity>
So the first time is Start, when the user clicks, the button launch the startFunction and change the text in Stop.
I suppose you have a state variable running
this.state = { running : true }
Now Inside your render method get the state data :
const { running } = this.state
your button should look like this :
<TouchableOpacity style={styles.button} onPress={() => this.uniqueFunction()}>
<Text style={styles.buttonTesto}>
{ running ? 'STOP' : 'START'}
</Text>
</TouchableOpacity>
Now your unique function have to do the two actions depends on application running status:
uniqueFunction = () => {
const { running } = this.state
if( running ) {
// The action you want to do when start button is pressed
}else
// The action you want to do when stop button is pressed
}
You need a state variable, and then you can use conditional rendering based on value of the variable. Like this:
<TouchableOpacity style={styles.button}
onPress={() => {this.state.flag ? this.stopFunction() : this.startFunction()}}
>
<Text style={styles.buttonTesto}>{this.state.flag? "STOP" : "START"}</Text>
</TouchableOpacity>
I'm trying to obtain a loader when a button is clicked (for a signup) without create another page (only to show the loader).
How can I do??
This is my code and what I tried (but it doesn't appears)
class Signup extends Component {
constructor(props) {
super(props);
this.state = {
//code about signup
isLoading: false
};
}
showLoader = () =>{
this.setState({ isLoading: true})
this.registrazione()
}
registrazione() {
//code about signup
}
render() {
return (
<View style={style.container}>
//code about signup
<View style={style.footer}>
<TouchableOpacity
style={[style.button, style.buttonOK]}
onPress={() => this.showLoader()}
>
<Text style={[style.buttonTesto]}>Signup</Text>
</TouchableOpacity>
<ActivityIndicator animating={this.state.isLoading} size="large" color="#56cbbe" />
</View>
</KeyboardAwareScrollView>
</View>
</View>
);
}
}
First of all you have one closing View tag that is not needed.
Assuming that's just mistake in question, you could do it with JS ternary operator. Like this:
<View style={style.container}>
//code about signup
<View style={style.footer}>
{(!this.state.isLoading) ? <TouchableOpacity
style={[style.button, style.buttonOK]}
onPress={() => this.showLoader()}
>
<Text style={[style.buttonTesto]}>Signup</Text>
</TouchableOpacity> : <ActivityIndicator animating={this.state.isLoading} size="large" color="#56cbbe" />}
</View>
</KeyboardAwareScrollView>
</View>
You can learn more about ternary operators here
This should replace your button with loading animation.
Don't hesitate to ask any more questions if you have any! I'm glad to help!
The workflow of what I am trying to do is the following:
User clicks on hamburger icon and gets a dropdown.
User clicks on rename.
A modal appears with a TextInput and two buttons to accept and cancel.
The problem I am facing is between 2/3. As I click on rename, the modal appears momentarily, but then disappears as the keyboard shows up. Even though I cannot see the modal, my keystrokes still register to the TextInput. When I close the keyboard, the modal appears again.
Here is my code:
<Modal
animationType="slide"
transparent={true}
visible={renaming}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<KeyboardAvoidingView style={styles.modalMask} behavior="padding">
<View style={styles.modalContainer}>
{unitType === 'file' ?
<Text style={styles.modalHeader}>Rename clip:</Text>
:
<Text style={styles.modalHeader}>Rename folder:</Text>
}
<TextInput
style={styles.modalInput}
onChangeText={(newTitle) => this.setState({title: newTitle})}
defaultValue={'tits'}
autoFocus={true}
selectTextOnFocus={true}
keyboardAppearance={'dark'}
maxLength={30}
/>
<View style={styles.modalOptions}>
<TouchableHighlight
onPress={() => {
this.handleCloseModal();
}}
style={styles.modalOption}
>
<Text>CANCEL</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
this.handleRename(id, unitType)}
}
style={[styles.modalOption, styles.renameOption]}
>
<Text style={{color: 'white'}}>RENAME</Text>
</TouchableHighlight>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
As far as I can see, the problem could be because KeyboardAvoidingView is pushing the Modal up enough to move it away from viewport.
Try passing a negative value to keyboardVerticalOffset as a prop to KeyboardAvoidingView. This prop controls how far up the Modal gets pushed when keyboard comes up.
Example:
<KeyboardAvoidingView style={styles.modalMask} behavior="padding" keyboardVerticalOffset= {-200}>
<View>
Your view
</View>
</KeyboardAvoidingView>
This is my first experience with JS/React/React Native. I don't yet fully grasp mechanics of this framework, so be kind to me.
What I have :
<View style={styles.container}>
<View style={styles.timerContainer}>
<View style={styles.timerBar}>
<Image style={styles.icon} source={require('../../img/time50.png')}/>
{Timer} //First
</View>
<View style={styles.timerBar}>
<Image style={styles.icon} source={require('../../img/break50.png')}/>
{Timer} //Second
</View>
</View>
<View style={styles.buttonContainer}>
<TouchableHighlight onPress={this.startWork}>
<Image style={styles.imageButton} source={require('../../img/start.png')}/>
</TouchableHighlight>
<TouchableHighlight onPress={this.startBreak}>
<Image style={styles.imageButton} source={require('../../img/break.png')}/>
</TouchableHighlight>
<TouchableHighlight onPress={this.stopWork}>
<Image style={styles.imageButton} source={require('../../img/end.png')}/>
</TouchableHighlight>
</View>
</View>
Timer is a custom class, which will have 'start', 'pause' and 'end' methods. I want to call methods of both Timers when TouchableHighlight is pressed.
Overall it would look like this :
when first TouchableHighlight is pressed (startWork), Timer2.end and Timer1.start should be called, when second is pressed (startBreak), Timer1.pause, Timer2.start should be called, for third (stopWork) it would be Timer1.end, Timer2.end.
But how am I supposed to refer to these timers from onPress methods? Should I keep both Timers in some vars of parent class? I am totally stuck and have no idea where to start (and what's acceptable). Such problem is not easily googlable (or I don't know where to look). I would appreciate any help (solution, pointing to tutorial...).
When you render the timer components in this component you should assign a ref to each one of them, like
<Timer ref={r => this.timer1 = r}/>
Then in the Touchable callback functions you can call this.timer1.start()
Note: Cleaner ref setting would be to actually have another function, so you aren't constantly binding in the render function:
setTimerOne = (r) => {
this.timer1 = r;
}
render() {
<Timer ref={this.setTimerOne}/>
}