I'm using react-navigation and stack-navigator to manage my screens.
Platforms I'm using:
Android
React Native: 0.47.1
React Navigation: 1.0.0-beta.11
Emulator and Device
I have a screen, which acts as a modal form but it is really a full screen. Why is it important the part of "acts as a modal form"? That's because it is kind of modal menu with some options and WITH A TRANSPARENT BACKGROUND COLOR.
This is what I expect:
But what I'm getting is this:
As you can see, in the second example the background color is completely replaced or the components previously loaded is unmounted so the effect I want to acchieve is lost.
The idea is to be able to navigate to this screen like any other screen.
If it is not posible to accomplish using react-navigation, what other way can I take to do so?
This component executes actions (redux) since is a cross app component and encapsulates lot of mechanisms and logic inside, that's why I can't use it as a PureComponent relaying on the component which makes use of this one. At least, making this Component as PureComponent would force me to replicate many mechanisms and logic in many other components.
For the sake of the question, and to avoid making the question enormous, both screens have exactly the same style, but the one pushed through StackNavigation replaces the backgroundColor, or unmounts the previus screen.
This is what I've have so far:
//PlaylistSelector.js
render() {
//Just a full size empty screen to check and avoid bugs
//Using red instead of transparent, works
return (
<View style={{ flex: 1, backgroundColor: 'transparent' }}>
</View>
);
}
//Navigator.js
import { StackNavigator } from 'react-navigation';
import Album from './Album'; //This is the screen I expect to keep at the background
import PlaylistSelector from './PlaylistSelector';
const AppNavigator = StackNavigator(
{
...moreScreens,
Album: { screen: Album },
PlaylistSelector: {
screen: PlaylistSelector,
navigationOptions: {
style: { backgroundColor: 'red' } //Does not work, red is just to ilustrate, should be transparent,
cardStyle: { //Does not work,
backgroundColor: 'transparent',
},
bodyStyle: { //Does not work,
backgroundColor: 'transparent',
},
}
}
},
{
initialRouteName: 'Splash',
headerMode: 'none',
cardStyle: { //Does not work
backgroundColor: 'transparent',
},
transitionConfig: (): Object => ({ //Does not work
containerStyle: {
backgroundColor: 'transparent',
},
}),
}
);
export default AppNavigator;
This was really changed in latest React Navigation versions. See
https://reactnavigation.org/docs/themes/
For example
import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '#react-navigation/native';
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: 'red'
},
};
export default function App() {
return (
<NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
);
}
There's a solution in react-navigation v6.x
Setting cardStyle: {backgroundColor: 'transparent'} on screenOptions prop for the Stack Navigator didn't work for me.
But, with the help of this Github issue page, I found a solution that sets a default background color for our NavigatorContainer:
import {
DefaultTheme,
NavigationContainer,
} from '#react-navigation/native';
...
const navTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: 'transparent',
},
};
...
return (
<NavigationContainer
theme={navTheme}
...
There we can change 'transparent' to anything we want.
With react-navigation v3.x You can use the transparentCard pro:
const MainNavigator = createStackNavigator(
{
BottomTabs: {
screen: BottomTabsStack,
},
Modal: {
screen: ModalScreen,
}
},
{
headerMode: 'none',
mode: 'modal',
transparentCard: true,
cardStyle: { opacity: 1 } //This prop is necessary for eventually issue.
}
);
You can find a complete example below:
https://snack.expo.io/#cristiankmb/stacks-in-tabs-with-header-options-with-modal
Since you want 'Modal', you can use 'Modal' built in react-native.
https://facebook.github.io/react-native/docs/modal.html
Add opacity:
cardStyle: {
backgroundColor: "transparent",
opacity: 1
}
As of react-navigation#2.17.0 there is a config option transparentCard that makes this possible.
const RootNavigator = createStackNavigator(
{
App,
YourModal,
},
{
headerMode: 'none',
mode: 'modal',
transparentCard: true,
},
);
This won't blur the background for you; it will just make it transparent. To properly blur it, you'll need to do something like this. Make sure you start the background way above the top edge of the screen, since the card will animate in from the bottom, and you probably want the screen to gradually blur instead of the opacity having a sharp edge as it animates in.
this way worked for me:
const MyDrawerNavigator = createStackNavigator(
{
screen1: {
screen: screen1,
},
screen2: {
screen: screen2,
},
},
{
navigationOptions: () => ({
cardStyle: {
backgroundColor: "rgba(0,0,0,0.5)",
},
}),
}
);
Just throwing what seem most straight forward to me, e.g. setting a headerBackground on screenOptions:
<Stack.Navigator
headerMode={"float"}
screenOptions={{
headerBackground: () => <View style={{flex: 1, backgroundColor: themeContext.background}} />,
backgroundColor: themeContext.background
}}
>
This doesn't work with transparent headers tho, which might actually be what lead you here in the first place. In that case simply wrap your whole app container into a View like this.
export default function App() {
return (
<View style={{flex: 1, backgroundColor: 'red'}}>
<NavigationContainer linking={linkingConfig}>
<StatusBar />
<ApolloProvider client={client}>
<Provider store={store}>
<Navigator />
</Provider>
</ApolloProvider>
</NavigationContainer>
</View>
)
}
Obviously you want to extract that into it's own (styled) component instead :)
And if you're using Expo, and don't have a seperate dark theme, you can simply set backgroundColor in your app.json.
Related
Good day. I'm quite new to React Native. I am using the react-native-app-intro-slider for the app's intro/welcome screens. The intention is to then navigate to the Login Screen once the user is done or once they press the skip button.
Below is the code I have implemented in the OnboardingScreen. I am however getting an error with regards to the navigation.
import {
StyleSheet,
View,
Text,
Image,
StatusBar
} from 'react-native';
import AppNavigator from '../navigation/Screens';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import AppIntroSlider from 'react-native-app-intro-slider';
import Onboarding from 'react-native-onboarding-swiper';
import LoginScreen from '../screens/auth/LoginScreen';
const data = [
{
title: 'Header 1',
text: 'Description.\nSay something cool',
image: require('../assets/images/Slider_1.png'),
bg: '#ffffff',
},
{
title: 'Header 2',
text: 'Description.\nSay something cool',
image: require('../assets/images/Slider_2.png'),
bg: '#ffffff',
},
{
title: 'Header 3',
text: 'Description.\nSay something cool',
image: require('../assets/images/Slider_3.png'),
bg: '#ffffff',
},
];
const styles = StyleSheet.create({
slide: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
image: {
width: 320,
height: 320,
marginVertical: 32,
},
text: {
fontSize: 20,
color: '#000000',
textAlign: 'center',
},
title: {
fontSize: 30,
fontWeight: 'bold',
color: '#000000',
textAlign: 'center',
},
dotStyle: {
backgroundColor: '#000'
},
});
const Stack = createStackNavigator();
function Root() {
return (
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
);
}
export default class OnboardingScreen extends Component {
constructor(props) {
super(props);
this.state = {
showRealApp: false,
//To show the main page of the app
};
}
_onDone = () => {
navigation.navigate('Root', {
screen: 'LoginScreen'
});
//this.props.navigation.navigate('LoginScreen');
//this.setState({ showRealApp: true });
};
_onSkip = () => {
this.setState({ showRealApp: true });
};
_renderItem = ({item}) => {
return (
<View
style={[
styles.slide,
{
backgroundColor: item.bg,
},
]}>
<Text style={styles.title}>{item.title}</Text>
<Image source={item.image} style={styles.image} />
<Text style={styles.text}>{item.text}</Text>
</View>
);
};
_keyExtractor = (item) => item.title;
render() {
return (
<View style={{flex: 1}}>
<StatusBar translucent backgroundColor="transparent" />
<AppIntroSlider
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
bottomButton
showPrevButton
onDone={this._onDone}
showSkipButton={true}
onSkip={this._onSkip}
data={data}
/>
</View>
);
}
}
Navigation error
There are various mistakes you are doing here. First, I highly recommend you to structure your RN project in a way that it matches your needs, I won't talk a lot about this but I can give you a heads up. Usually, you have a separete folder/file with the route for your app, so move all your code related to react-navigation there. Once moved, you have to create a new stack that contains your welcome screen. So, it may look like:
const AppContainer = () => (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Intro" component={OnBoardingScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
</NavigationContainer>
)
export default AppContainer
In the above code we are introducing a new stack that will be taken as the first screen to be reached. Why is this needed? You need to tell somehow to react-navigation the screens you are using in order to navigate to them. Once added the stack, you will have access to the navigation prop. There is another change here, you have to change your App.js file with the new component we are exporting from the above code which will be the root for the project. Once you have done with this, then you can use your _onDone method like this:
_onDone = () => {
/* use the name you used for the stack.
Also, you don't need to specify the screen
for this use case since you are not nesting
the navigators */
this.props.navigation.navigate('Intro');
};
And that's all. Basically, you needed to add a new stack with your OnBoardingScreen and start using the navigation prop
I created a component at react-native, but the text of the button is always at uppercase, someone knows why it doesn't take the text that pass, because I want to show 'Login', but it shows 'LOGIN'
import React, { Component } from 'react';
import { View, Button} from 'react-native';
import LabelApp from "../../config/labels.app";
const labelApp = LabelApp.loginView;
export default class Login extends Component {
constructor(props){
super(props);
this.handleClickBtnEnter = this.makeLogin.bind(this);
}
makeLogin() {
}
render() {
return (
<View>
<Button title= {labelApp.textButtonLogin} onPress={this.handleClickBtnEnter}/>
</View>
);
}
}
Label of component
const LabelApp = {
loginView: {
textButtonLogin: 'Ingresar',
},
}
export default LabelApp;
The visualization
For react Native Paper button use uppercase={false} prop:
<Button
mode="outlined"
uppercase={false}
accessibilityLabel="label for screen readers"
style={styles.yourButtonStyle}>Button label</Button>
So, the other two answers are correct that you should use TouchableOpacity, but as someone new to React Native, it took me awhile to understand what was going on here. Hopefully this explanation provides a little more context.
The built-in Button component seems to have some weird compatibility/visibility issues on occasion, one of which is rendering the title prop text all uppercase. When viewing the documentation for the Button component in Chrome, the preview shows all text being capitalized under the "Web" view but not Android or iOS (I was having this issue using Expo and Metro Bundler on an Android device, so not sure what to make of this). I couldn't find anything about capitalization/uppercase in the Button docs, so perhaps this is a bug.
The solution is to use a different component called TouchableOpacity. It also has an onPress event you can use and a built-in touch animation, but it has less out of the box styling than the Button component. Important to note from docs: "Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout." It doesn't have a title prop, so you just put the button text in a Text component, like so:
<Button
title='text will be capitalized'
onPress={onPress}
/>
becomes
<TouchableOpacity onPress={onPress}>
<Text>text will stay lowercase</Text>
</TouchableOpacity>
I was having the same issue as OP, and this solved it for me.
From the official documentation
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
The recommend use of touchable opacity or touchable native feedback
https://facebook.github.io/react-native/docs/touchableopacity
Below I've added textTransform: 'lowercase', as a style rule for the button to override any inherited text casing.
import React, { Component } from 'react'
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'
export default class App extends Component {
constructor(props) {
super(props)
this.state = { count: 0 }
}
onPress = () => {
this.setState({
count: this.state.count+1
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text> Touch Here </Text>
</TouchableOpacity>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{ this.state.count !== 0 ? this.state.count: null}
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
textTransform: 'lowercase', // Notice this updates the default style
},
countContainer: {
alignItems: 'center',
padding: 10
},
countText: {
color: '#FF00FF'
}
})
https://snack.expo.io/Bko_W_gx8
This question is 3 years old and I'm not sure why no one has answered it correctly until now.
Native android buttons are all caps by default starting from android lollipop, which is what react native uses when you use the control Button from react-native in your app. To override the functionality, you just need to add this line in your styles.xml file inside your app theme (not the splash screen style)
<item name="android:textAllCaps">false</item>
You can get more details here: https://stackoverflow.com/a/30464346/11104068
The changes are not going to apply instantly obviously since the change is in the naive xml file and not in a JavaScript file. So you will need to do a npm/yarn run android
I've tried your code and it looks like it's the expected behaviour with Button component from react-native
You can see this at the official documentation
I believe that you need to change Button component, take it from another package to meet your needs.
As an alternative you can create your own button
import React, { Component } from 'react';
import { View, Button, TouchableHighlight, StyleSheet } from 'react-native';
import LabelApp from "../../config/labels.app";
const labelApp = LabelApp.loginView;
export default class Login extends Component {
constructor(props){
super(props);
this.handleClickBtnEnter = this.makeLogin.bind(this);
}
makeLogin() {
}
render() {
return (
<View>
<TouchableHighlight onPress={this.handleClickBtnEnter} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>{labelApp.textButtonLogin}</Text>
</View>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
marginBottom: 30,
width: 260,
alignItems: 'center',
backgroundColor: '#2196F3'
},
buttonText: {
textAlign: 'center',
padding: 20,
color: 'white'
}
});
<Button
style={{
borderRadius: 10,
backgroundColor: "#000",
width: 200,
height: 50,
}}
>
<Text
uppercase={false}
>
Login
</Text>
</Button>
We are using createBottomTabNavigator. In one of the tab contains search bar at the top. While clicking on that search bar, we are opening the keyboard. But the keyboard pushing up the bottom tab bar also. We need the bottom tab bar remains at the bottom when opening keyboard.
One of the solution I have tried is, in android manifest, I have changed android:windowSoftInputMode="adjustPan" or "adjustNothing". It is working fine as expected. But we are using chat layout in another tab which needs "adjustResize". So I have to keep "adjustResize" for windowSoftInputMode.
As another solution, I tried to change windowSoftInputMode inside component itself. SO I have tried with this - https://www.npmjs.com/package/react-native-android-keyboard-adjust. But no use.
As another one, I tried to create a TabBarComponent like mentioned here https://github.com/react-navigation/react-navigation/issues/618. But not working as expected.
const SignedIn = createBottomTabNavigator(
{
Followers: {
screen: FollowerStack,
...
},
Search: {
screen: SearchStack,
},
Home: {
screen: HomeStack,
},
Bookmarks: {
screen: BookmarkStack,
},
Profile: {
screen: ProfileStack,
}
},
{
initialRouteName: "Home",
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
tabBarOptions: {
keyboardHidesTabBar: true,
showIcon: true,
showLabel: false,
activeTintColor: "red",
inactiveTintColor: "gray",
adaptive: true,
safeAreaInset: {
bottom: "always"
},
style: {
position: 'relative',
backgroundColor: "#F9F8FB",
height: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
paddingTop: DeviceInfo.hasNotch() ? "5%" : "0%",
minHeight: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
width: '100%',
bottom: 0
}
}
}
);
Is there any other properties existed for making the bottom tab bar sticky at the bottom?
or
Is it possible to change the android manifest windowSoftInputMode from inside component?
Please comment below if you required any other code part for reference. Thanks for any help.
I used React navigation 5, is this what you want?
<SignedIn.Navigator
tabBarOptions={{
keyboardHidesTabBar: true
}}
}>
</SignedIn.Navigator>
The document to read here.
Please use this on
<Tab.Navigator
screenOptions={{
tabBarHideOnKeyboard: true
}}
/>
I am sure it will work perfectly
Just go to AndroidManifest.xml file and change/add inside activity tag:
android:windowSoftInputMode="adjustPan"
Found it, just add your bottom navigation into a view making that view of dimensions of the screen, this way:
import React from 'react'
import { StyleSheet, Text, View, Dimensions } from 'react-native'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const { width, height } = Dimensions.get("window")
const Tab = createBottomTabNavigator()
export default function () {
return (
<View style={{
width,
height,
}}>
<Tab.Navigator>
<Tab.Screen
name="Screen1"
component={Component}
/>
<Tab.Screen
name="Screen2"
component={Component}
/>
<Tab.Screen
name="Screen3"
component={Component}
/>
</Tab.Navigator>
</View>
)
}
screenOptions={{
headerShown: false,
tabBarActiveTintColor: '#1a3c43',
tabBarInactiveTintColor: '#1a3c43',
tabBarActiveBackgroundColor: 'white',
tabBarInactiveBackgroundColor: '#1a3c43',
tabBarHideOnKeyboard: true,
tabBarstyle: {
backgroundColor: '#1a3c43',
paddingBottom: 3
}
}}
I was having the exact same issue. Following are the two ways I successfully tackled it.
adding "softwareKeyboardLayoutMode":"pan" to the app.json like below
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"softwareKeyboardLayoutMode":"pan"
}
by doing this, the bottom navigator was staying hidden behind the keyboard. however, the ScrollView containing TextInputs was not working the way I wanted it to. the whole app screen was getting translated by the height of the keyboard, hiding half of my ScrollView and everything above it (Header and stuff).
The second workaround I used is using useKeyboard hook.
step 1: remove "softwareKeyboardLayoutMode" so that it defaults to height
(this causes the CustomBottomTabNav to rise above the keyboard as the whole screen gets squeezed in the remaining height)
step 2: dynamically reset the position of CustomBottomTabNav when the keyboard is active.
In the screen containing TextInputs
<ScrollView style={{ height: keyboard.keyboardShown? 510 - keyboard.keyboardHeight: 510}}>
/* lots of text inputs*/
</ScrollView>
In the CustomBottomTabNav
tabBarOptions={{
...otherStuff,
style={{ bottom: keyboard.keyboardShown? -100: -10, ...otherStuff}}
}}
This second method is working much more reliably. I tried keyboardAvoidingView but was unable to wrap my head around its unpredictable behavior.
<Tab.Navigator screenOptions={{ tabBarHideOnKeyboard: Platform.OS!== 'ios'}}>
</Tab.Navigator>
It will work perfectly for both platforms in react native
I got solution for this problem. Previously, I have done a minor mistake while configuring 'react-native-android-keyboard-adjust'. Now it is working fine. So we can change the 'windowSoftInputMode' for a particular component using this library - https://www.npmjs.com/package/react-native-android-keyboard-adjust
If you are using a TextInput in the search bar you could hide the bottom tab when TextInput is focused (and the keyboard shows) like so:
const [searchBarFocused, setSearchBarFocused] = useState(false)
In the markup:
<TextInput
onFocus = {()=> setSearchBarFocused(true)}
onBlur = {()=> setSearchBarFocused(false)}
/>
//Other code
{!searchBarFocused && <CustomBottomTab/>}
For finegrained control put a ref on the textInput to blur/focus and what not programmatically.
Also, you can check out RN:s KeyboardAvoidingView
I doubt this question is ever going to be closed but in case someone stumbles over this problem and needs an answer, I'd recommend looking through the following thread:
https://github.com/react-navigation/react-navigation/issues/6700
Tl;Dr
When supplying the framework with a custom navbar, you have to take care of the hiding of the said bar on keyboard opening. This is because it is the default android behaviour.
So either change the manifest configuration as the author already described as his first solution that didn't work.
OR modify your component to listen to the react-natives KEYBOARD. keyboardDidShow & keyboardDidHide Events and either move it down with bottomMargin: -XYZ or hide it completely with a flag.
following two responses on github helped me:
https://github.com/react-navigation/react-navigation/issues/6700#issuecomment-625985764
https://github.com/react-navigation/react-navigation/issues/618#issuecomment-303975621
In case someone wnats to use my code as a reference
interface BottomTabStateProps {
// unrelated Props
}
interface BottomTabDispatchProps {
// unrelated service dispatchers
}
interface BottomTabState {
navVisible: boolean;
}
class BottomTabContainerClass extends React.Component<
BottomTabStateProps & BottomTabDispatchProps & NavigationInjectedProps, BottomTabState
> {
constructor(props: BottomTabStateProps & BottomTabDispatchProps & NavigationInjectedProps) {
super(props);
this.state = {
navVisible: true
};
}
componentDidMount() {
Keyboard.addListener('keyboardDidShow', () => this.keyboardDidShow());
Keyboard.addListener('keyboardDidHide', () => this.keyboardDidHide());
}
componentWillUnmount() {
Keyboard.removeAllListeners('keyboardDidShow');
Keyboard.removeAllListeners('keyboardDidHide');
}
keyboardDidShow() {
this.setState({ navVisible: false });
}
keyboardDidHide() {
this.setState({ navVisible: true });
}
render() {
return (
<View>
{
this.state.navVisible &&
<View>
// add custom Navbar here
</View>
}
</View>
);
}
}
I'm trying to make my own custom tab bar and it seems tabBarComponent is the way to do it by setting as my own component. With the below code my tab bar does not show up.
const TabNav = TabNavigator({
LaunchScreen: {
screen: PrimaryNav,
navigationOptions: {
tabBarLabel:'Find',
tabBarIcon: ({ tintColor }) => (
<Icon name='search' size={20} color='white' />
),
},
},
}, {
navigationOptions: {
headerTintColor: 'grey'
},
tabBarComponent: FooterTabs,
tabBarPosition: 'bottom',
swipeEnabled:false,
animationEnabled:false,
lazy:true,
tabBarOptions: {
showIcon:true,
showLabel:false,
style: {
backgroundColor: 'black'
}
}
});
In FooterTabs.js:
export default class FooterTabs extends Component {
render () {
return (
<View style={styles.container}>
<Text>FooterTabs Component</Text>
</View>
)
}
}
What am I missing?
const TabNav = TabNavigator({
......,
tabBarComponent: props => (
<FooterTabs{...props} />
),
tabBarPosition: 'bottom',
........
});
Try that. enclose your FooterTabs i.e <FooterTabs /> not FooterTabs
After some trial and error, the solution to my issue was to wrap my footer content in a ScrollView, then the tabs showed up as expected, though I am not sure why that is required.
I also implemented Caleb's suggestion (thanks!) of using tabBarComponent: props => <FooterTabs{...props} /> in order to pass the props which I need though was not the cause of the issue.
I am using react-navigation in React Native and I have changed the header color with
const MyScreenNavigator = StackNavigator({
...
}, {
navigationOptions: {
headerStyle: {
backgroundColor: 'blue',
},
headerTintColor: 'white'
}
});
It does change the background color of both header and status bar, but the font color is still black in the status bar.
How can I customise the font color of the status bar?
I use StatusBar
const RootNavigator = StackNavigator({
...
}, {
initialRouteName: 'Home',
navigationOptions: {
header: <Header />
}
});
header.js
import { StatusBar } from 'react-native';
export default class Header extends Component<{}> {
<View>
<StatusBar backgroundColor="#fff" />
...
</View>
}
The API and documentation still changes quite frequently, but in order to style StackNavigator's header, use headerTitleStyle: { color: 'white' }. (https://reactnavigation.org/docs/navigators/stack#headerTitleStyle)
I believe you can't change status bar background color with navigationOptions by now. You should use StatusBar in your component:
<StatusBar
barStyle="light-content"
backgroundColor='blue'
/>