i need develop a dropdown like, for example, whatsapp.
This is my code trying to do it with ToolbarAndroid
<Icon.ToolbarAndroid
titleColor={'#000000'}
style={{
height: 56,
alignSelf: 'stretch',
width: 20
}}
iconColor={"#fff"}
iconSize={26}
rtl={true}
navIconName={"more-vert"}
contentInsetStart={50}
actions={[{title: 'Settings', show: 'always'}, {title: 'Settings 2', show: 'always'}]} />
I dont know if ToolbarAndroid is the component what i need, maybe if i know the real name of this style of menu i can be more accurate in google searchs.
Here an image of the menu:
I need do a menu like this (whatsapp)
just change it here:
actions={[{title: 'Settings', show: 'never'}, {title: 'Settings 2', show: 'never'}]} />
This is called overflow menu in android:
Action "Show:"
when to show this action as an icon or hide it in the overflow menu:
always, ifRoom or never
if you set never, it will hide in overflow menu icon at the right side of toolbar.
For more information see this ToolbarAndroid
Related
I'm using Fluent UI's TeachingBubble component. I want it to have one button, which should be centered. How can that be done? I'm unable to move it from the bottom right corner.
Current code:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
>
This is some content.
</TeachingBubble>
This outputs:
What should be added to this code so that the primary button is centered (at the red cross I marked)?
Button is inside footer part of TeachingBubble, so the style of footer should be changed:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
styles={{
footer: {
display: "flex",
justifyContent: "center",
},
}}
>
Some text
</TeachingBubble>
That renders as:
In my react-native project, I would like to implement a feature that tapping on an icon pops up a native picker component in iOS and Android respectively. Something like this library's effect:
But with the linked library, it always default to have a text input field clicking on which the picker native component pops out. But in my project I don't need that default text input field, I have an icon component (think it as whatever react-native custom component), I would like to have the same effect when clicking/tapping on the icon component.
Is it possible to achieve it with the library I linked? I noticed there is icon property in the library, but it is not clear how to use it and whether it is the property that could replace the text input field. Anyone could you please help me?
This is what I tried with the library, but it doesn't show MyIconComponent instead it still shows a input text field:
return (
<RNPickerSelect
onValueChange={value => console.log(value)}
icon={() => {
return (
<View style={styles.main}>
<MyIconComponent />
</View>
);
}}
items={[
{label: 'Football', value: 'football'},
{label: 'Baseball', value: 'baseball'},
{label: 'Hockey', value: 'hockey'},
]}
/>
);
If I can't achieve what I want with this library then how to implement the same effect when tapping on my icon component?
According to the library documentation, in order to remove the default field add "placeholder={}" to the component props.
That is what you are looking for? did I get you right?
I have tab based navigation in one of my react native component. I'm using React Navigation v1. React Navigation shows tab indicator only for the current active tab.
However, I want every tabs to show tab indicator (bottom border on tab) by default but with different colors of course. And when active, each tab will show slightly different shade of the color.
I have tried with React Navigation v1, v2, Native Base. Couldn't find a way around.
I want the tab bar exactly like this image.
In React Navigation, we have something like this :
TabNavigator(
{
Tab1: { screen: Tab1Component },
Tab2: { screen: Tab2Component }
},
{
tabBarComponent: TabBarTop,
tabBarPosition: 'top',
tabBarOptions: {
indicatorStyle: {
borderBottomColor: '#6495ed',
borderBottomWidth: 2
}
}
}
)
But this adds the style to the entire tabs. I want some ability to be applied on each tab basis. Same with Native Base's tabBarUnderlineStyle.
You should use this props in your tabBarOptions inside TabNavigatorConfig
activeTintColor - Label and icon color of the active tab.
activeBackgroundColor - Background color of the active tab.
inactiveTintColor - Label and icon color of the inactive tab.
inactiveBackgroundColor - Background color of the inactive tab.
I want to use the Alert Api to display OS behavior alerts.
I'm asking myself if you can display Hyperlinks inside the Text of an alert?
Alert.alert(
'Alert',
'This is an Alert. I want to include hyperlinks here.',
[
{
text: 'Cancel',
onPress: () => console.log("Alert cancel"),
style: 'cancel',
},
{
text: 'Accept',
onPress: () => console.log("Alert accept"),
style: 'default'
},
]
);
You could implement a dialog container, and use the React Native Linking component on the Dialog.Description onPress() to turn it into a hyperlink:
<Dialog.Description onPress={() => Linking.openURL('https://www.google.com')}
style={{ textDecorationLine: 'underline', color: 'blue' }}>www.google.com</Dialog.Description>
or you could add a Text component inside the Dialog.Description alongside some other text to just have a certain word be the hyperlink:
<Dialog.Description>
Visit this website:
<Text onPress={() => Linking.openURL('https://www.google.com')}
style={{ textDecorationLine: 'underline', color: 'blue' }}>www.google.com</Text>
</Dialog.Description>
A word of caution, you're suppose to only pass a string to the Dialog.Description and doing the above will give you a console warning. So use at your own caution but it's working fine for me, and you can hide the warning using the React Native YellowBox component by adding this line outside of your class export (so near the import statements):
YellowBox.ignoreWarnings(['Failed prop type: Invalid prop `children` of type `array` supplied to `DialogDescription`, expected `string`'])
Much better to create a Modal (or simply a View component with position: absolute) to handle this than to dive into the native code.
https://facebook.github.io/react-native/docs/0.56/modal
You need to install "react-native-dialogs"( an android only module for material design dialogs) as follows:
1] Installation:
npm install react-native-dialogs --save
2] Linking:
react-native link react-native-dialogs
3] Import it in your page:
import DialogAndroid from 'react-native-dialogs';
also need to add below code inside your render:
<Button title="show custom alert" onPress={this.showCustomAlert} />
and at last add below function in your screen:
showCustomAlert() {
DialogAndroid.alert('Alert', `This is a link Google`, {
contentIsHtml: true
});
}
You can find more details here https://github.com/aakashns/react-native-dialogs
This is possible using the Linking module that comes with React-Native. Please check out the following:
Display hyperlink in React Native App
If this doesn't work maybe try this npm package:
https://www.npmjs.com/package/react-native-hyperlink
I'm using Smartclient, v 8.2 (LGPL).
I have a MenuButton that opens a Menu. The button is aligned right. the problem is that when the menu is displayed; the left side of the menu is aligned with the left side of the button, and there's no space for rendering the menu. As a result, when I click the menu button, the page becomes wider (horizontal scrollbar appears) in order to make space for rendering the menu. when the menu is hidden, the page returns to normal size.
is there any way to avoid this? What I would like is that the right side of the menu is aligned with the right side of the button.
I tried using the align property of the menu, but no matter what value I used, I always see the same behavior. Also I set overflow= "hidden", but still same problem.
this is small test case:
isc.Menu.create({
ID: "menu",
autoDraw: false,
showShadow: true,
shadowDepth: 10,
overflow: "hidden",
align: "right",
data: [
{title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
{title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
{isSeparator: true},
{title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
{title: "Save As", icon: "icons/16/save_as.png"}
]
});
isc.MenuButton.create({
ID: "menuButton",
autoDraw: false,
title: "File",
width: 100,
menu: menu
});
isc.HLayout.create({
width: "100%",
members: [
isc.Canvas.create({
width: "*",
height: 24,
backgroundColor: "lightgray"
}),
menuButton
]
})
I found the problem: if showShadow is set to true, then I see the issue described in the question. removing that attribute (default is false) solved the problem: menu is aligned to the right, and no scrollbars appear.