If a user don't have any rights to show resources of react-admin he can not login and he have this message :
React-admin is properly configured.
Now you can add a first <Resource> as child of <Admin>
How can we show the login page and the dash board with no resources ?
const App = ({ classes }) => (
<React.Fragment>
<Admin
locale="fr"
i18nProvider={i18nProvider}
customReducers={{ reducer, theme: themeReducer }}
customRoutes={customRoutes}
appLayout={MyLayout}
authProvider={authProvider}
dashboard={Dashboard}
loginPage={MyLoginForm}
dataProvider={dataProvider}
>
{permissions => [
hasRight(permissions, 'resource') ?
<Resource name="Myresource"
list={MyresourceList}
show={hasRight(permissions, 'show') ? MyresourceShow : null}
create={hasRight(permissions, 'create') ? MyresourceCreate : null}
edit={hasRight(permissions, 'edit') ? MyresourceEdit : null}
/>
: null,
]}
</Admin>
</React.Fragment>
)
This message should be used to debug only, for sure.
I opened an issue on React Admin: https://github.com/marmelab/react-admin/issues/2749
In the meantime, you can copy the check done in the authProvider before rendering the Admin component.
const App = () => {
if (userHasNotAccess) {
return <ErrorPage />;
}
return (
<Admin {...props}>
{/* ... */}
</Admin>
);
};
Related
Is it possible to use ReactNative with useFieldArray from react-hook-form? I couldn't find any reference for that.
I'm trying to use it but I can't get the output data from the TextInputs. It looks like the onChange is not working, I tried to use the onChange prop but still couldn't make it.
Example:
const {
control,
formState: {errors},
register,
getValues,
handleSubmit,
} = useForm({
defaultValues: {
playerNameInput: [{playerName: ''}, {playerName: ''}],
},
});
const {fields, append, remove} = useFieldArray({
control,
name: 'playerNameInput',
});
return(
<>
{fields.map((player, index) => (
<View>
<Controller
control={control}
rules={{required: true}}
name="playerNameInput"
render={() => (
<TextInput
style={{width: 100}}
defaultValue={`${player.playerName}`}
{...register(`playerNameInput.${index}.playerName`)}
/>
)}
/>
</View>)}
<Button onPress={handleSubmit(data => console.log(data))}>
Save Changes
</Button>
</>
)
I'm trying to make a custom menu to share pictures and location using the renderAction prop in gifted-chat. I can't get it to call a function. renderActions={console.log('hello')} outputs as expected, for some reason functions aren't being called.
I've looked at code examples, and I can't find anything that I'm missing - but obviously I'm missing something.
here's the code. If there's any extra info that would be helpful, please let me know and I'll add it. Still new to stack.
renderActions > console.log() doesn't get called
renderActions() {
console.log('renderActions called');
}
renderAction={console.log()} get's called.
renderActions={this.renderActions} does not get called.
I've tried passing it in every way I can think of:
{() = > this.renderActions()}, {this.renderActions.bind(this)}, {this.renderActions} ... nothing seems to work.
render() {
let bgColor = this.props.route.params.bgColor;
return (
<View style={[styles.bodyContent]}>
<GiftedChat
renderBubble={this.renderBubble.bind(this)}
renderSystemMessage={this.renderSystemMessage.bind(this)}
renderInputToolbar={this.renderInputToolbar.bind(this)}
renderActions={() => this.renderActions()}
messages={this.state.messages}
onSend={(messages) => this.addMessage(messages)}
user={{
_id: this.state.uid,
}}
/>
{Platform.OS === 'android' ? (
<KeyboardAvoidingView behavior="height" />
) : null}
</View>
);
}
Any help would be greatly appreciated. I'm sure I'm missing something obvious, but I'm completely stumped. Thank you!
render action is not supposed to console log, if you see what it returns you will see it returns JSX
import {GiftedChat, InputToolbar} from 'react-native-gifted-chat';
// custom action
const customAction = () => {
return(
<View>
<Text>Custom Action</Text>
</View>
);
}
<GiftedChat
renderInputToolbar={props => {
return (
<InputToolbar
{...props}
containerStyle={styles.chatWithoutBorder}
renderComposer={() => <CustomComposer {...props} />}
renderActions={ <CustomAction /> }
renderSend={() => <CustomSend {...props} />}
/>
);
}}
/>
all these custom components are actually normal components you can create it on your own, all you need is to send props for it
and for the footer below the message box, you will need this renderAccessory as described here in the https://github.com/FaridSafi/react-native-gifted-chat
Thanks to my tutor, I have an answer!
The renderInputToolbar={} prop overwrites renderActions={}. I ended up not using the renderActions prop in the <GiftedChat /> component. Instead passing it as a prop to the <InputToolbar />.
Here's the code:
` <GiftedChat
renderBubble={this.renderBubble.bind(this)}
renderSystemMessage={this.renderSystemMessage.bind(this)}
renderInputToolbar={this.renderInputToolbar.bind(this)}
//renderActions={this.renderActions.bind(this)}
messages={this.state.messages}
onSend={(messages) => this.addMessage(messages)}
user={{
_id: this.state.uid,
}}
/>`
Then the renderInputToolbar method:
renderInputToolbar() {
if (this.state.onlineStatus == false) {
} else {
return <InputToolbar renderActions={this.renderActions} />;
}
}
I'm attempting to pass a 'passcode' state as params in my React Native app.
I'm doing this by passing params into a 'navigation.navigate' call.
However, every time I navigate to the next screen, it's returning 'undefined' for 'route.params'.
For reference, here is my component I'm passing data FROM:
const SignUpPasscodeScreen = ({ navigation }) => {
const [passcode, setPasscode] = useState(0)
return (
<View>
<View style={styles.mainView}>
<SubLogo />
<Heading title="Set passcode" />
<SubHeading content="You'll need this anytime you need to access your account." />
<Input inputText={ text => setPasscode(text) } inputValue={passcode} />
</View>
<View style={styles.subView}>
<CtaButton text="Continue" onPressFunction={ () => navigation.navigate({ routeName: 'SignUpLegalName', params: { passcode } } ) } />
</View>
</View>
)
}
And here's the component I'm passing data to, and where the error occurs upon navigation:
const SignUpLegalName = ({ route, navigation }) => {
const { passcode } = route.params
return (
<View>
<View style={styles.mainView}>
<SubLogo />
<Heading title="Tell us your name" />
<SubHeading content="This needs to be the same as what's on your passport, or any other form of recognised ID." />
<Input />
<Input />
</View>
<View style={styles.subView}>
<CtaButton text="Continue" onPressFunction={ () => navigation.navigate('SignUpLink')} />
</View>
</View>
)
}
I've tried two forms of passing the props through:
Passing it in as a second argument
Passing it in as a 'params' object as shown above
Both should work according to the documentation - link here
For reference, this is my route structure:
const switchNavigator = createSwitchNavigator({
loginFlow: createStackNavigator({
SignUpPasscode: SignUpPasscodeScreen,
SignUpLegalName: SignUpLegalName,
})
});
The above structure doesn't say to me that it's a nested structure which therefore requires any additional work to pass it through...
Can someone help? It'd be appreciated as it's giving me a headache!
Have a try with below code in the button press event:
<CtaButton
text="Continue"
onPressFunction={() => navigation.navigate('SignUpLegalName',{ passcode })}
/>
So I am using react-navigation 5 and I have a custom drawer component for my app. I want to display the name of the logged-in user in the drawer for which I am using a state variable and I am updating the state from firestore. I am calling a function in useEffect which accesses firestore and gets the name of the user. But I think the useEffect is not working without refresh because unless I save the project and refresh the application the state is not getting updated in the application and I cannot see the name of the user without refreshing but it is visible after a refresh. Any ideas why this is happening? Any help would be appreciated. Thank you.
Custom drawer
export default function CustomDrawer(props) {
const paperTheme = useTheme();
const [name,setName]=useState('');
useEffect(() => {
doStuff();
}, []);
const doStuff = async () => {
var phone=global.phone;
await firestore().collection("Users").where('Phone Number', '==', phone).get().then(querySnapshot=>{
querySnapshot.forEach(documentSnapshot => {
console.log("in drawer");
console.log(documentSnapshot.data());
setName(documentSnapshot.data().Name);
})
})
};
return(
<View style={{flex:1}}>
<DrawerContentScrollView {...props}>
<View style={styles.drawerContent}>
<View style={styles.userInfoSection}>
<View style={{flexDirection:'row',marginTop: 15}}>
<Avatar.Image
source={{
uri: ''
}}
size={50}
/>
<View style={{marginLeft:15, flexDirection:'column'}}>
<Title style={styles.title}>{name}</Title>
</View>
</View>
</View>
</View>
</DrawerContentScrollView>
</View>
);
}
Looks like you have doStuff function defined outside the useEffects.
Either you need to put it inside useEffects or add it in dependency list
useEffect(() => {
doStuff();
}, [doStuff]);
I want to add a comment section to my react native app similar to instagram's one. I am using a getstream activity feed and have tried importing CommentField from react-native-activity-feed but i get an invariant violation error when i use it. However, i'm not fully convinced the CommentField will get me the type of comment section I want. Does getstream support this or will I need to make my own comment field and save it in a database?
EDIT:
I have this Activity:
const CustomActivity = (props) => {
return (
<Activity
{...props}
Footer={
<>
<CommentList
CommentItem={({ comment }) => ( <CommentItem comment={comment} /> )}
activityId={props.activity.id}
reactions={props.activity.latest_reactions}
/>
<Image source={ require('./images/logo.png') } style={{width:98, height:22}}/>
<LikeButton {...props} />
<CommentBox
onSubmit={(text) =>
props.onAddReaction('comment', CustomActivity, { text: text })
}
styles={{ container: { height: 78 } }}
/>
</>
}
/>
);
};
Then this gets rendered:
<FlatFeed
feedGroup = "timeline"
userID = User ID is put here
Activity={CustomActivity}
notify/>
I currently get this error when I submit a comment: Errors for fields 'activity_id', 'parent'
I think it may have something to do with activityId in the CommentList but im not too sure
You'll want to use the CommentBox and CommentList components. We do something like this in our example app:
<SinglePost
activity={activity}
feedGroup={feedGroup}
userId={userId}
Activity={(props) => (
<React.Fragment>
<Activity
{...props}
/>
<CommentList
CommentItem={({ comment }) => ( <CommentItem comment={comment} /> )}
activityId={props.activity.id}
reactions={props.activity.latest_reactions} />
</React.Fragment>
)}
Footer={(props) => {
return (
<CommentBox
onSubmit={(text) =>
props.onAddReaction('comment', activity, { text: text })
}
avatarProps={{
source: (userData) =>
userData.data.profileImage,
}}
styles={{ container: { height: 78 } }}
/>
);
}}
/>