I am using detailslist, is there a quick property to change sort icon?
I find below styles but do not know how to set it
That's not possible because sort icon is implemented directly inside DetailsColumn.base.tsx:
{column.isSorted && (
<IconComponent
className={classNames.sortIcon}
iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'}
/>
)}
But if you really need that functionality you can recompose DetailsList Component. Hint:
<DetailsList
onRenderDetailsHeader={(headerProps, defaultRender) => {
return headerProps && defaultRender ? (
{defaultRender({
...headerProps,
onRenderColumnHeaderTooltip: props => {
return <TooltipHost {...props} children={/* Implementation here! */} />
}
})}
) : null;
}}
/>
Keep the same children functionality and rewrite icon render.
Codepen example for hint.
You are able to achieve what you want by doing some css trickery. In my use-case I only had to change the color. In the example below I added a background-image for setting your own icon.
<DetailsList onRenderDetailsHeader={(headerProps, defaultRender) => {
return defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cell': {
backgroundColor: '#0f238c',
color: 'white'
},
'.ms-Icon': {
color: '#0f238c',
backgroundColor: '#0f238c',
backgroundImage: decendingFilter ? 'url([PATHTOIMG1])' : 'url([PATHTOIMG2])',
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain',
},
},
}
}
});
}}
/>
Related
Hello i have a Problem with my wrapper component. If i put inside the Flatlist component the scrolling doesn't work anymore. I try to pur everywhere flex:1 (on flatlist, on the wrapper itself) but no changes still broken.
What is my mistake?
I expected the normal scroll behavior.
import React from 'react';
import { KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard, Platform } from 'react-native';
const KeyboardAvoidingViewWrapper = ({ children, keyboardOffset }) => {
const additionalOffset = Platform.OS === 'ios' ? 0 : 17;
return (
<KeyboardAvoidingView
keyboardVerticalOffset={keyboardOffset ? keyboardOffset + additionalOffset : 65 + additionalOffset}
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{ flex: 1, }}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
{children}
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
)
}
export default KeyboardAvoidingViewWrapper;
In the Screen:
<KeyboardAvoidingViewWrapper>
<View style={{ flex: 1 }}>
<FlatList
data={data}
.....
/>
</View>
</KeyboardAvoidingViewWrapper>
Any help is more than appreciate. Thank you.
try giving 'position' to behavior property to your KeyboardAvoidingView.
<KeyboardAvoidingView behavior='position'>
i am making a gallery app using React-Native with node.js , I got a data from Node.js api, i want to display files either image or video depends on file type in a FlatList , I don't know how to write the condition for that,
{items.file_Name == 'mp4' ? Video : image }
I am trying to use the above code but i don't know how to get the file name. So please check my code
export default class HomeScreen extends React.Component {
constructor(Props) {
super(Props);
this.state = {
error: null,
Posts:[
{"id":166,"user_id":1,"description":"7th test","file_Name":[VID-WA0005.mp4"]},
{"id":10,"user_id":3,"description":" 6th test","file_Name":["10.jpg", "12.jpg"]},
{"id":9,"user_id":2,"description":" 5th test","file_Name":["9.jpg", "14.jpg"]} ],
}
}
render() {
const { Posts } = this.state
return (
<View style={styles.container}>
<View style={styles.tabContent}>
<FlatList style={styles.list}
data={this.state.Posts}
keyExtractor={(data_posts, index) => {
return data_posts.id.toString();
}}
ItemSeparatorComponent={() => {
return (
<View style={styles.separator} />
)
}}
renderItem={(post, id) => {
const items = post.item;
return (
<View style={styles.card}>
<View style={styles.cardHeader}>
<Text style={styles.title}>{items.description}</Text>
</View>
<View style={styles.cardContent}>
{items.file_Name.split('.').reverse()[0] == 'mp4' ?
<Video
source={{ uri: "http://192.168.1.2:3200/" + items.file_Name }}
style={{ width: '100%', height: 600 }}
resizeMode="cover"
paused={this.state.paused}
controls={true}
volume={this.state.volume}
muted={this.state.muted}
paused={this.state.paused}
onLoad={this.onLoad}
onBuffer={this.onBuffer}
onProgress={this.onProgress}
/>
:
<Image style={styles.cardImage} source={{ uri: "http://192.168.1.2:3200/" + item.file_Name }} />
}
</View>
</View>
)
}}
/>
{/* Flatlist Ends*/}
</View>
</View>
);
}
}
````
I tried with condition like
````{items.file_Name.split('.').reverse()[0] == 'mp4' ? <Video /> : <image />}````
But its not working because i am unable to get the file type.
If anyone know how to get the file name and how to display either video or image please tell me .
You can use endsWith() function is used to check whether the given string ends with the characters of the specified string or not
{items.file_Name.toString().endsWith("mp4") ? Video : image }
Try this
{items.file_Name.split('.').pop() == 'mp4'?<Video /> : <image />}
I am using React StackNavigator which has structure like this:
-----BottomNavigator
-------TabNavigator (has 3 screens)
---------StackNavigator
so I want to return to previous screen from stackNavigator to TabNavigator (screen 2).
Here is my code for TabNavigator:
const ServiceTabNavigator = createMaterialTopTabNavigator(
{
screenone: screenone,
screentwo: screentwo,
screenthree: screenthree
},
{
tabBarOptions: {
activeTintColor: "#1B5357",
inactiveTintColor: "gray",
style: {
backgroundColor: "#fff",
color: "#1B5357"
},
indicatorStyle: {
backgroundColor: "#1e90ff"
}
},
navigationOptions: {
tabBarLabel: "ESTH",
tabBarIcon: ({ tintColor }) => (
<Icon name="bars" color={tintColor} size={24} />
)
}
}
);
Here is for the StackNavigator which has code like this but it does not go to the screen2 instead screen1 of tabNavigator.
static navigationOptions = ({ navigation }) => ({
title: "Request Service",
headerLeft: (
<TouchableOpacity
onPress={() => {
() =>
navigation.dispatch(
NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: "MainNavigator" }) //MainNavigator is bottomNavigator
]
})
);
navigation.navigate("screentwo");
}}
>
<Icon
name="times"
type="font-awesome"
iconStyle={{ color: "#000" }}
containerStyle={{ marginLeft: 16 }}
/>
</TouchableOpacity>
),
headerTitleStyle: {
color:'#00CA9D',
fontWeight: 'bold',
},
headerStyle: { borderBottomWidth:0 }
});
Thank you
I use react-navigator.. there is a property named jumpToIndex for this.
I solved it this way for my needs to open a Modal instead jumping to the given Tab.
Maybe you can modify to fit your needs:
<TabBarBottom
{...props}
jumpToIndex={(index) => {
if (index === 5) {
// This is the MORE-Tab-Button. Don't switch to tab, but open the Modal
props.navigation.navigate('Menu_Screen');
} else {
jumpToIndex(index);
}
}}
/>
From how you described your navigation hierarchy it looks like your root navigator is always Main/BottomNavigator, so why do you call dispatch reset before navigating to screentwo?
Seems like the issue might be that the reset action is not finished before you try to navigate to screentwo, so you end up on initialRoute of MainNavigator.
So calling just navigation.navigate("screentwo") (without reseting root) should do what you want to achieve.
In case you really need to reset the root, try executing the navigation to screentwo using dispatch as well, to make sure the actions are performed in sequence
const navigateAction = NavigationActions.navigate({
routeName: route,
params: params
})
navigation.dispatch(navigateAction)
OK after digging up I have found out the way
React NavigationV2 Way:
navigation.navigate('MainNavigator', {}, NavigationActions.navigate({ routeName: 'Requests' }))
React NavigationV3 Way:
navigation.navigate(NavigationActions.navigate({
routeName: 'MainNavigator',
action: NavigationActions.navigate({ routeName: 'Requests' })
}))
BottomNavigator as MainNavigator
Screentwo as Requests
In a nutshell navigation.navigate() has third parameter which acts likes second navigation.
So It first Navigate to MainNavigator ------then----> Screen2 in TabNavigator
Thanks to David check this post. Hope it will help someone else in future.
How to navigate between different nested stacks in react navigation
I'm using a 3rd party component named "Dialog" with the render method below. As you can see - the component has more than one className. I'd like to create a styled-component called StyledDialog which contains a prop that lets me override the width associated with the div that has the "SURFACE" className. Can this be done with Styled-Components - or do I need to bring the source code into my app and handle that manually.
render() {
const { className, children, onClose, open, ...otherProps } = this.props;
const ariaHiddenProp = open ? {} : { 'aria-hidden': true };
return (
<aside
className={classnames(
ROOT,
{
[ANIMATING]: this.state.animating,
[OPEN]: open,
},
className
)}
onClick={(e) => {
if (onClose) onClose(e);
}}
onTransitionEnd={() => {
this.setState({ animating: false });
}}
{...ariaHiddenProp}
>
<div
className={SURFACE}
onClick={(e) => {
e.stopPropagation();
}}
{...otherProps}
>
{children}
</div>
<div className={BACKDROP} />
</aside>
);
}
Based on your explanation, i think you should wrap this 3rd party component with styled method and apply your styles by referencing the corresponding classnames of that component from the wrapped styled component.
For instance, If the name of existing component is Hello, you can apply styling from a styled-component on any of its DOM children like this:
const StyledHello = styled(Hello)`
.${classes.SURFACE} {
width: 10rem;
border: 2px solid green;
}
`;
Working Demo
So I have a horizontal scrollview at the top of the view. The ScrollView contains nodes that have a specified width. I then have a border on the bottom of the ScrollView, like you can see in this screen cap: http://i.imgur.com/pOV1JFP.png
As you can see the child nodes of the ScrollView at the top don't reach the border. However, if I change the ScrollView to a View with flexDirection: 'row', then the child nodes fill the height fine. I've tried changing a few properties on the scrollview, such as:
Setting padding:0 on contentContainerStyle
automaticallyAdjustContentInsets={false}
Changing the values of contentInsets directly
None of those seem to fix the issue.
The scrollview code & style:
var styles = StyleSheet.create({
nav: {
padding: 0,
marginTop: 30,
flex: 1,
borderBottomWidth: 1,
borderColor: '#000000'
}
});
<ScrollView
style={[{width: screen.width}, styles.nav]}
horizontal={true}
showsHorizontalScrollIndicator={true}
automaticallyAdjustContentInsets={false}>
{dayNavItems}
</ScrollView>
The child components (makes up dayNavItems)
const styles = StyleSheet.create({
container: {
paddingLeft: 15,
paddingRight: 15,
width: 50,
justifyContent: 'center'
},
odd: {
backgroundColor: '#ccc'
},
selected: {
backgroundColor: '#39b54a'
},
text: {
fontFamily: 'Optima'
}
});
class DayNavItem extends React.Component {
static propTypes = {
day: React.PropTypes.object.isRequired,
odd: React.PropTypes.bool,
selectDay: React.PropTypes.func.isRequired,
selected: React.PropTypes.bool
};
render() {
const d = new Date(this.props.day.created_at);
const viewStyles = [styles.container];
if (this.props.selected) {
viewStyles.push(styles.selected);
} else if (this.props.odd) {
viewStyles.push(styles.odd);
}
return (
<TouchableOpacity style={viewStyles} onPress={() => this.props.selectDay(this.props.day.uuid)}>
<View>
<Text style={styles.text}>{getMonth(d)}</Text>
<Text style={styles.text}>{d.getDate()}</Text>
</View>
</TouchableOpacity>
);
}
}
Adding contentContainerStyle={{flexGrow: 1}} will do the trick.
<ScrollView contentContainerStyle={{flexGrow: 1}}>
</ScrollView>
There is a property called contentContainerStyle for ScrollView. I just solved a similar issue where I set flex: 1 to the ScrollView's styles, ScrollView's contentContainerStyle, and the child View component.
The other answers are correct, but just to provide a clarifying example:
<ScrollView contentContainerStyle={{ flex: 1 }}>
{children}
</ScrollView>
Setting flex: 1 for ScrollView's contentContainerStyle property did the trick for me.
I always end up creating this component in all my projects:
import * as React from 'react'
import { ScrollView, ScrollViewProps, StyleSheet } from 'react-native'
export function FullHeightScrollView(
props: {
children: React.ReactNode
} & Omit<ScrollViewProps, 'contentContainerStyle'>
) {
return (
<ScrollView contentContainerStyle={styles.grow} {...props}>
{props.children}
</ScrollView>
)
}
const styles = StyleSheet.create({
grow: { flexGrow: 1 },
})
Use it in place of React Native's ScrollView.
If ScrollView is wrapped inside of a SafeAreaView, put flex: 1 on SafeAreaView, this did the trick for me after hours of debugging...
Parent:
Child (styles ScrollView I implemented has nothing to do with the current issue you reported):
I have made a simple package for those who just want, like me, a working out of the box ScrollView, without having to apply all the time the styles to make it work properly.
https://github.com/SrBrahma/pagescrollview
Usage:
import { PageScrollView } from 'pagescrollview';
<PageScrollView>
{/** Your contents */}
</PageScrollView>