I was curious if it is possible to use a component in place of the icon property in bottomtab of react-native-navigation-v2.
Example:
bottomTab: {
text: 'Profile',
icon: <Image source={{uri: 'myUrlHere'}} style={styles.someStyle}/>,
textColor: '#fff',
}
Example2 using react-native-elements Avatar component:
bottomTab: {
text: 'Profile',
icon: <Avatar rounded source={{uri: 'myUrlHere'}}/>,
textColor: '#fff',
}
If this has been posted before, forgive me, I just could not find it in my searches.
Related
i have list in which i want to show image like this
this is my list component I have giving correct path but nothin happens have giving width and height but no luck
import React from "react";
import {
View,
Text,
StyleSheet,
Button,
Image,
ImageBackground,
} from "react-native";
import colors from "../config/colors";
import AppText from "./AppText";
export default function ListItem({ image, title, sutitle }) {
return (
<View style={styles.container}>
<Image style={styles.image} source={image} />
<View style={styles.tittleContainer}>
<AppText style={styles.title}>{title}</AppText>
<AppText style={styles.subtitle}>{sutitle}</AppText>
</View>
</View>
);
}
const styles = StyleSheet.create({
image: {
width: 70,
height: 70,
borderRadius: 35,
marginRight: 10,
},
container: {
flexDirection: "row",
},
sutitle: {
fontWeight: "bold",
color: colors.red,
},
tittleContainer: {
padding: 20,
},
title: {
fontWeight: "bold",
marginBottom: 7,
},
});
I am unable to render image on my screen
the issue is while providing props to ListItem component you're passing "Image". and while using it in the component you're using "image".
I hope this solves your issue.
Image is working copy past your code nothing else,
check your image path correctly
https://snack.expo.io/#jsfit/image
export default function ListItem({ image, title, sutitle }) { in this params you are getting the image as lower i and when you are passing with Image as capital I.
Currently my items are all to the left as they should be by default. I can not seem to move it to the right side. For reference, I have attached an image
https://ibb.co/fYFPMFJ
I have already tried styling it with tabStyle and using alignSelf: 'flex-end' alignItems: 'flex-end' flexDirection: 'row', justifyContent: 'flex-end'
Here is the code:
const TabNavigator = createMaterialTopTabNavigator({
ރިޕޯޓު: {screen: MainScreenCategoryTabNavigator, params:{categoryID: 1004}},
ދީން: {screen: MainScreenCategoryTabNavigator, params:{categoryID: 1003}},
ސިޔާސީ: {screen: MainScreenCategoryTabNavigator, params:{categoryID: 1002}},
ޙަބަރު: {screen: MainScreenTabNavigator, params:{categoryID: 1000}},
},
{
initialRouteName:'ޙަބަރު',
lazy: true,
tabBarOptions: {
labelStyle: {
fontSize: 16,
fontFamily: 'MV_Waheed',
fontWeight: "200"
},
tabStyle: {
width: 60,
textAlign: 'right'
},
}
},
);
Like I mentioned above, and the reference to the image attached, I would like to move the tabs to the right instead of left. How can I achieve this?
Thanks!
Fixed the issue. The problem for me was that I could not align it to the right. I removed the width and that solved my problem. That was all that needed to be done
One of the variants it's to use your own component as a tabBar. In this way it's easier to customize it as you wish.
import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';
const TabBarComponent = (props) => (<BottomTabBar {...props} />);
const TabScreens = createBottomTabNavigator(
{
tabBarComponent: props =>
<TabBarComponent
{...props}
style={{ borderTopColor: '#605F60' }}
/>,
},
);
I have a page where I use CKEditor 5 with CKFinder 3.
By default, the images that are included in the textarea are responsive and can only be aligned as full or right.
The concerning page has photos of contacts on it and they shouldn't be that big.
How can I configure the width of an image that is inserted through the button of the toolbar?
ClassicEditor
.create( document.querySelector( '#pageTextArea' ), {
image: {
styles: [ { name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' } ]
}
ckfinder: {
uploadUrl: 'example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
}
})
.catch( error => {
console.error( error );
process.exit(1);
});
To provide some custom image styling you need to:
First, configure the image.styles option.
ClassicEditor.create( element, {
// ...
image: {
// ...
styles: [
// Pottentially some other style can go here. E.g. the `full` or `side`.
{ name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' }
]
}
}
And secondly, make the image 100px wide via CSS:
.ck-content figure.image.my-contact-side-image {
float: right;
width: 100px;
}
Note that you need to handle styles of the created content outside of the editor as well.
I'm using DrawerNavigator and, as long as I want to navigate to a new screen, all's fine.
Now I want to add a drawer item which does not navigate to a new screen but simply triggers an action (in general). Specifically, I want to use 'react-native' Share functionality.
I got this to work but I think the solution is not a very good one. Here's what I got so far:
const myContentComponent = props => (
<ScrollView alwaysBounceVertical={false}>
<SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
<TouchableItem
key="share"
onPress={() => {
Share.share(
{
message: 'YO: this will be the text message',
url: 'http://tmp.com',
title: 'This will be the email title/subject',
},
{
// Android only:
dialogTitle: 'This will be the title in the dialog to choose means of sharing',
},
);
props.navigation.navigate('DrawerClose');
}}
delayPressIn={0}
>
<SafeAreaView forceInset={{ left: 'always', right: 'never', vertical: 'never' }}>
<View style={[{ flexDirection: 'row', alignItems: 'center' }, {}]}>
<View style={[{ marginHorizontal: 16, width: 24, alignItems: 'center' }, { opacity: 0.62 }, {}]}>
<Icon name="share" />
</View>
<Text style={[{ margin: 16, fontWeight: 'bold' }, { color: DrawerItems.defaultProps.inactiveTintColor }]}>Share</Text>
</View>
</SafeAreaView>
</TouchableItem>
</SafeAreaView>
</ScrollView>
);
const RootStack = DrawerNavigator(
{
Settings: {
screen: SettingsScreen,
},
},
{
contentComponent: myContentComponent,
},
);
Basically, I am creating a new contentComponent based off of the default:
https://github.com/react-navigation/react-navigation/blob/v1.5.8/src/navigators/DrawerNavigator.js#L16-L22
I am copying the styles and element structure of a normal drawer item (everything under TouchableItem) - all this so I can define my own onPress which does the share logic and closes the drawer.
There has to be a better way right? What happens if I want the "Share" drawer item somewhere amongst the drawer items rendered by DrawerItems (the ones that support navigation)? Right now I can only work around the items rendered by DrawerItems. Besides, copying so much code from react-navigation seems like really bad form.
I just want an item which does some custom logic instead of rendering a screen.
I am not sure will it be helpful?
I used onPress event for logout like this way. It's no need to render a new DrawerItems
const DrawerNavigator = createAppContainer(createDrawerNavigator({
Logout: {
screen: EmptyScreenForLogoutConfirmation,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Logout',
drawerIcon: ({ tintColor }) => <Icon name={"ios-cog"} size={26} />,
}),
},
},
{
contentComponent:(props ) => (
<DrawerItems {...props}
onItemPress = {
( route ) =>
{
if (route.route.routeName !== "Logout") {
props.onItemPress(route);
return;
}
return Alert.alert( // Shows up the alert without redirecting anywhere
'Confirmation required'
,'Do you really want to logout?'
,[
{text: 'No'},
{text: 'Yes', onPress: () => { props.navigation.navigate('Logedout'); }},
]
)
}
}
/>
),
contentOptions: {
activeTintColor: '#e91e63',
}
},))
I'm using example from https://marmelab.com/admin-on-rest/Theming.html#using-a-custom-layout.
Added a new IconMenu as in the snippet below. The right menu icon does not get displayed. Tested component by invoking it from a different form, and it works. However, integrating it into AppBar does not work.
Looks like either the styles or something else is interfering with it.
Has anyone got such a menu working well with AppLayout customizations?
const styles = {
// Snipped rest of the styles from example
loader: {
position: 'absolute',
top: 0,
right: 50,
margin: 16,
zIndex: 1200,
},
iconMenu: {
position: 'absolute',
top: 0,
right: 0,
margin: 16,
zIndex: 1200,
},
};
const AppBarMenu = (props) => (
<IconMenu {...props}
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Settings" />
<MenuItem primaryText="About" />
<MenuItem primaryText="Sign out" />
</IconMenu>
);
AppBarMenu.muiName = 'IconMenu';
<AppBar title={title} iconElementRight={<AppBarMenu style={styles.iconMenu} />} />
Used proposal in https://github.com/marmelab/admin-on-rest/issues/525
Quote from above URL:
If anyone wants buttons in the title bar, they will have to have not only a custom layout, but copy AppBar.js from admin-on-rest into their project and import that. Inside AppBar.js, iconElementRight works inside the MuiAppBar tags, but not inside Layout.js.