React native: how do i disable a button?

Viewed 285

i currently have a button on my posts page. I want to disable this button if the current user id is equal to the post user id.

I am using Formik to manage my state.

AppButton.js

 function AppButton({ title, onPress}) {
 return (
 <TouchableOpacity style={[styles.button]} onPress={onPress}>
  <Text style={styles.text}>{title}</Text>
</TouchableOpacity>
);
}

SubmitButton.js

import { useFormikContext } from "formik";

function SubmitButton({ title }) {
const { handleSubmit } = useFormikContext();
return <AppButton title={title} onPress={handleSubmit}/>;
}

Form.js

function MessageForm({ post,user }) {
return(
<SubmitButton title="Message"/>

PostScreen.js

function PostScreen({ route }) {
const post = route.params.post;
const { user } = useAuth();

clg(user.id) // this prints the id of the current user
clg(post.userId) / /this prints the userId of the post

return(
<Form post={post}/>
1 Answers

This might help

<SubmitButton title="Message" disabled={user.id === post.userId} />

function SubmitButton({ title, disabled }) {
  const { handleSubmit } = useFormikContext();
  return <AppButton title={title} onPress={handleSubmit} disabled={disabled}/>;
}

function AppButton({ title, onPress, disabled}) {
 return (
   <TouchableOpacity style={[styles.button]} onPress={onPress} disabled={disabled} >
     <Text style={styles.text}>{title}</Text>
  </TouchableOpacity>
 );
}
Related