I am trying to implement more options menu in mobile app and I am using react-native-options-menu package from react-native. Even though I click on the more options button the menu doesn't show up. Below is the code that I have used.
{<OptionsMenu
customButton={(<Icon type = {iconNames.fontAwesome} name={iconNames.more} color={"white"} size={30} style={{marginRight: 8}}/>)}
destructiveIndex={1}
options={["Edit", "Delete", "Cancel"]}
actions={[this.editPost, this.deletePost]}/>}
PS: I don't know what I am missing or doing wrong. Also, in the import statement (import OptionsMenu from "react-native-options-menu") it shows 3 dots below react-native and when I hover over it, it says cannot find module, but the module is present in node-modules
Thanks in advance!
Related
I'm facing an issue on TextInput's contextMenuHidden on Android, IOS works well not showing the context menu though.
<TextInput style={styles.input} contextMenuHidden={true} />
I did tried the view component solution:
removeClippedSubviews={true}
However, the behaviour came back, after I delete the whole text input -> retype the text -> double tap (shows back context menu)
Not sure if anyone experienced this before, but need some advice/suggestion for Android case, must I create a custom native ui component instead?
I'm building a react native application and found out the react-native-multiple-select library which i emplemented following the documentation https://www.npmjs.com/package/react-native-multiple-select . The view is being displayed but the selected items are not showing up, only the counter of selected items works. I think it's because I don't have the control over how its function getSelectedItemsExt() works and from my researchs on internet like React-native-multiple-select: Cannot read the property 'getSelectedItemsExt' of undefined I only found that I should be doing
<View>
{ this.multiselect
?
this.multiselect.getSelectedItemsExt()
:
null}
</View>
.
Though it helped get rid of the red screen, it doesn't display the items.
So can you please tell me how I can manage
this.multiselect.getSelectedItemsExt()
and get my items displayed.
Any help is much appreciated. Thanks in advance.
I can guess throughout the question that you are passing the hideTags props to the MultiSelect component i.e you are having inside the component <MultiSelect hideTags>. This hideTags was your problem because It does what it's name sounds, i.e it doesn't display the values you set in your FlatList or whatever component. If you want the values to be displayed then remove hideTags from inside the component and you should have your items displayed. Well you want also to customize the output of this library, it's colors and InputField style then head up to the root of your react native application, then go to node-module -> react-native-multiple-select -> Library there you will find the core file that you can customize at your leisure.
<FlatList
data={this.state.data}
keyExtractor={(x, i) => i.toString()}
console.log('Hi from React Native')
renderItem={({ item }) =>
<Text>
{`${item.name.first} ${item.name.last}`}
</Text>
}
/>
That's my function example of where I'm doing a console.log, but there's nothing showing up in the "Debug Console" of VSCode. I know everything is running and the component likely did mount as I am able to view my app on the Expo client app on my device. I am getting an error saying 'identified expected'.
I'm also not sure what a keyExtractor is doing here.
First off, you cannot use a console.log statement there, FlatList expects a list of props in that place. You may place your log statement in JavaScript code block.
Secondly, to use VSCode's debugger, you have to attach it to your packager first. Have you done that? You'll need a relevant VSCode extension. There's some help available here and here on how to do that; it's a separate issue. You can simply use Google Chrome as an alternative by enabling JS debugging from your app. (In your app, open the developer menu, then tap Debug JS Remotely. Then in the Google Chrome window that opens, right click > Inspect > Console).
Finally, renderItem is a FlatList prop which renders each individual item in your list. You can use to style or modify each item of your FlatList.
I just upgraded two projects from using react-select 1.2.1 to 2.0.0. The first project is a "demo" for trying out react-select, a simple one based on Create React App. The other project is the serious stuff, including old and new technologies (Java, Maven). In the simple project the new react-select worked as predicted, but in the serious project I found that when I had made a selection and opened the menu again, all the options were rendered as selected!
I then found out about the isOptionSelected property and I tried this in my simple project first:
isOptionSelected={(selOpt, selOptArr) => false}
As expected, this caused no option to be rendered as selected. However, when I put the same line into the serious project, it cured the problem there; now only the correct option was rendered as selected!
This is the complete Select definition:
<Select
components={{ DropdownIndicator }}
styles={mySelectStyles}
placeholder={someText}
isClearable={true}
isDisabled={readOnly}
isOptionSelected={(selOpt, selOptArr) => false}
noOptionsMessage={() => "No match"}
value={value}
onChange={(selectedItem) => {
if (selectedItem !== null) console.log(...);
}}
options={myOptions}
/>
I have not been able to find out why the line with isOptionSelected causes different rendering in my two projects. To me it seems like a bug in react-select 2.0.0.
I'm a brand new junior dev working on a react-native app for the first time. I have been searching for quite a while for a way to add a link to the text of a react-native checkbox's value text. If anyone has a link to documentation that might explain what I want to do, I would be super appreciative since I haven't found anything helpful yet. I saw that you can not add html elements into native after I tried a number of variations of anchors. I've tried adding Link to variations and attempted to add an onPress function to the label. I'm grasping at straws here... is this even possible to do?
To be clear, I want a user to be able to press the words "Terms of Service" and have it link to the page that has the terms
{this.props.isUser &&
<CheckBox
containerStyle={styles.checkbox}
onChange={(event, checked) => this.updateAttr('terms', checked)}
value={this.props.program.terms}
label="I have read and understand the Terms of Service"
labelLines={2}
/>
}
Instead of adding the "I accept...." as a label to checkbox, put the Check box without any label and the text 'I have read' as separate Text elements inside a view element and align them accordingly. Then inside the view, put the terms and conditions part inside a touchable and use React Native Linking to link the touchable to open a URL when touched.
https://facebook.github.io/react-native/docs/linking.html
React-Native Open Url in default web browser