Develop Reference

Selecting another mui tab breaks css from Google code prettify CDN

This is my site with this issue.
I'm coding a blog in ReactJS. In this article section, I use a mui Tabs and three mui Tabs like this to take apart an article into description, code and others parts. In description and code parts, I use google-code-prettify.
It works when I load the description page but it doesn't work when I click code or others page and then back to the description page.
BasicTabs.js
import React, { useState } from 'react';
import Box from '#mui/material/Box';
import Tab from '#mui/material/Tab';
import Tabs from '#mui/material/Tabs';
import CreateTabPanel from "./TabPanel";
export default function CreateBasicTabs(props) {
const [value, setValue] = useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const boxSx = {
position: 'sticky',
top: props.breadcrumbsHeight + 9.5,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}
const boxSxForTablet = {
position: 'sticky',
top: props.appBarHeight - 0.5,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
}
return (
<Box sx={{ width: '100%' }}>
<Box
sx={props.isTablet ? boxSxForTablet : boxSx}
className={`pop-up ${props.isScrolling && 'active shadow-active'}`}
>
<Tabs
value={value}
onChange={handleChange}
aria-label="basic tabs example"
sx={{ paddingLeft: 4 }}
>
<Tab label="Detail" {...a11yProps(0)} sx={{ textTransform: 'none' }} />
<Tab label="Code" {...a11yProps(1)} sx={{ textTransform: 'none' }} />
<Tab label="Others" {...a11yProps(2)} sx={{ textTransform: 'none' }} />
</Tabs>
</Box>
<CreateTabPanel value={value} />
</Box >
);
}
TabPanel.js
import React from 'react';
import Box from '#mui/material/Box';
import PropTypes from 'prop-types';
import Typography from '#mui/material/Typography';
import { data } from "../assets/data";
import { useSearchParams } from "react-router-dom";
function getArticleContent() {
const [searchParams] = useSearchParams();
const articleTitle = searchParams.get('title');
for (const item of data) {
if (articleTitle === item.query) {
return item.content;
}
}
}
function TabPanel(tabProps) {
const { children, value, index, ...other } = tabProps;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
style={{
backgroundColor: 'rgb(255, 255, 255)',
borderRadius: 10,
marginLeft: 30,
marginRight: 30,
marginBottom: 30,
}}
{...other}
className='shadow-active'
>
{value === index && (
<Box
sx={{
p: 3,
marginBottom: 10,
}}
>
<Typography>
{children}
</Typography>
</Box>
)}
</div>
);
}
export default function CreateTabPanel(props) {
return (
<>
<TabPanel value={props.value} index={0}>
<div
dangerouslySetInnerHTML={{ __html: getArticleContent() }}
/>
</TabPanel>
<TabPanel value={props.value} index={1}>
<div
dangerouslySetInnerHTML={{ __html: getArticleContent() }}
/>
</TabPanel>
<TabPanel value={props.value} index={2}>
Item Three
</TabPanel>
</>
);
}
CreateTabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.number.isRequired,
value: PropTypes.number.isRequired,
};
These are screen captures of when it is loaded and when I back to the page.
The second capture looks like blackout but this is because it's css from google-code-prettify works
pre.prettyprint {
border: 0 solid #888;
}
.prettyprint {
background: #000;
}
Could you tell me why it does not work?

React Native is not displaying background color in drawer Navigation

I have a react-native application drawer. In the navigation pane i want to apply background color of orange. Colors are being stored as a constant named as themed and the orange color is named as primary. The navigation is not applying the color to its background. Also i want to rescale the main application screen whenever the navigation panel is opened. That is not working too. I am using react-navigation v6.
This is my app.js file.
import React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import CustomDrawer from './navigation/CustomDrawer';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName={'Home'}>
<Stack.Screen name="Home" component={CustomDrawer} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
This is my mainLayout.js file
import React from 'react';
import {View, Text} from 'react-native';
import Animated from 'react-native-reanimated';
const MainLayout = ({drawerAnimationStyle}) => {
return (
<Animated.View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
...drawerAnimationStyle,
}}>
<Text>MainLayout</Text>
</Animated.View>
);
};
export default MainLayout;
This is how my customNavigation.js file looks like
/* eslint-disable react/self-closing-comp */
/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {View, Text, Image, TouchableOpacity} from 'react-native';
import {
createDrawerNavigator,
DrawerContentScrollView,
} from '#react-navigation/drawer';
import {MainLayout} from '../screens';
import {COLORS, FONTS, SIZES, icons, constants, dummyData} from '../constants';
import Animated from 'react-native-reanimated';
const Drawer = createDrawerNavigator();
const CustomDrawerItem = ({label, icon}) => {
return (
<TouchableOpacity
style={{
flexDirection: 'row',
alignItems: 'center',
marginBottom: SIZES.base,
height: 40,
paddingLeft: SIZES.base,
borderRadius: SIZES.base,
//borderColor
}}
// onPress
>
<Image
source={icon}
style={{
height: 20,
width: 20,
tintColor: COLORS.black,
}}
/>
<Text
style={{
marginLeft: 15,
color: COLORS.black,
...FONTS.h3,
}}>
{label}
</Text>
</TouchableOpacity>
);
};
const CustomDrawerContent = ({navigation}) => {
return (
<DrawerContentScrollView
scrollEnabled={true}
contentContainerStyle={{flex: 1}}>
<View
style={{
flex: 1,
paddingHorizontal: SIZES.radius,
}}>
{/* Close */}
<View
style={{
alignItems: 'flex-start',
justifyContent: 'center',
}}>
<TouchableOpacity
style={{
alignItems: 'center',
justifyContent: 'center',
}}
onPress={() => navigation.closeDrawer()}>
<Image
source={icons.cross}
style={{
height: 35,
width: 35,
tintColor: COLORS.black,
}}
/>
</TouchableOpacity>
</View>
{/* Profile */}
<TouchableOpacity
style={{
flexDirection: 'row',
marginTop: SIZES.radius,
alignItems: 'center',
}}
onPress={() => console.log('Profile Button Clicked')}>
<Image
source={dummyData.myProfile?.profile_image}
style={{
height: 50,
width: 50,
borderRadius: SIZES.radius,
}}
/>
<View
style={{
marginLeft: SIZES.radius,
}}>
<Text style={{color: COLORS.black, ...FONTS.h3}}>
{dummyData.myProfile?.name}
</Text>
<Text style={{color: COLORS.black, ...FONTS.body4}}>
View your profile
</Text>
</View>
</TouchableOpacity>
{/* Drawer Items */}
<View
style={{
flex: 1,
marginTop: SIZES.padding,
}}>
<CustomDrawerItem label={constants.screens.home} icon={icons.home} />
<CustomDrawerItem
label={constants.screens.my_wallet}
icon={icons.wallet}
/>
<CustomDrawerItem
label={constants.screens.notification}
icon={icons.notification}
/>
<CustomDrawerItem
label={constants.screens.favourite}
icon={icons.favourite}
/>
{/* Line Divider */}
<View
style={{
height: 1,
marginVertical: SIZES.radius,
marginLeft: SIZES.radius,
backgroundColor: COLORS.lightGray1,
}}></View>
{/* Drawer Items */}
<CustomDrawerItem label="Track Your Items" icon={icons.location} />
<CustomDrawerItem label="Coupons" icon={icons.coupon} />
<CustomDrawerItem label="Settings" icon={icons.setting} />
<CustomDrawerItem label="Invite a Friend" icon={icons.profile} />
<CustomDrawerItem label="Settings" icon={icons.setting} />
<CustomDrawerItem label="Help Center" icon={icons.help} />
</View>
{/* Logout */}
<View
style={{
marginBottom: SIZES.padding,
}}>
<CustomDrawerItem label="Logout" icon={icons.logout} />
</View>
</View>
</DrawerContentScrollView>
);
};
const CustomDrawer = () => {
const [progress, setProgress] = useState(new Animated.Value(0));
const scale = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [1, 0.8],
});
const borderRadius = Animated.interpolateNode(progress, {
inputRange: [0, 1],
outputRange: [0, 26],
});
const animatedStyle = {borderRadius, transform: [{scale}]};
return (
<View
style={{
flex: 1,
backgroundColor: COLORS.primary,
}}>
<Drawer.Navigator
overLayColor="transparent"
drawerStyle={{
flex: 1,
width: '65%',
paddingRight: 20,
backgroundColor: 'transparent',
}}
sceneContainerStyle={{
backgroundColor: 'transparent',
}}
screenOptions={{
headerShown: false,
drawerType: 'front',
}}
initialRouteName="MainLayout"
drawerContent={props => {
setTimeout(() => {
setProgress(props.progress);
}, 0);
return <CustomDrawerContent navigation={props.navigation} />;
}}>
<Drawer.Screen name="MainLayout">
{props => (
<MainLayout {...props} drawerAnimationStyle={animatedStyle} />
)}
</Drawer.Screen>
</Drawer.Navigator>
</View>
);
};
export default CustomDrawer;

Login using react-native and firebase-firestore and when we open the app, how to redirect to home page if already logged in?

I was watching a training video. In the video, he was doing the login process with firebase. At the same time, the application was redirecting the user to another page if logged in. I did what had to be done, but when I click the login button, a white screen greets me. Could you please tell me where I went wrong?
HomeStack.js
import { View, Text } from 'react-native'
import React from 'react'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
import LoginScreen from '../screens/Auth/LoginScreen'
import SignUpScreen from '../screens/Auth/SignUpScreen'
import ResetPasswordScreen from '../screens/Auth/ResetPasswordScreen'
import HomeScreen from '../screens/Home/HomeScreen'
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const BottomTab = () => {
return (
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen
name='HomeScreen'
component={HomeScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
}
const HomeStack = () => {
return (
<Stack.Navigator initialRouteName="BottomTab">
<Stack.Screen
name="BottomTab"
component={BottomTab}
options={{
headerShown: false
}}
/>
</Stack.Navigator>
)
}
export default HomeStack
AuthStack.js
import { View, Text } from 'react-native'
import React from 'react'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
import LoginScreen from '../screens/Auth/LoginScreen'
import SignUpScreen from '../screens/Auth/SignUpScreen'
import ResetPasswordScreen from '../screens/Auth/ResetPasswordScreen'
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const BottomTabStack = () => {
return (
<Stack.Navigator initialRouteName="LoginScreen">
<Stack.Screen
name='LoginScreen'
component={LoginScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='SignUpScreen'
component={SignUpScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='ResetPasswordScreen'
component={ResetPasswordScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
}
const AuthStack = () => {
return (
<Stack.Navigator initialRouteName="BottomTabStack">
<Stack.Screen
name="BottomTabStack"
component={BottomTabStack}
options={{
headerShown: false
}}
/>
</Stack.Navigator>
)
}
export default AuthStack
and LoginScreen.js
import { View, Text, SafeAreaView, TouchableOpacity, ScrollView, TextInput, Button } from 'react-native'
import React, { useContext } from 'react'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
import { AuthContext } from '../../navigation/AuthProvider'
import { Formik, validateYupSchema } from 'formik'
import * as yup from 'yup'
const color = '#aaa';
const LoginScreen = ({ navigation }) => {
const { login } = useContext(AuthContext);
const loginValidationSchema = yup.object().shape({
email: yup
.string()
.required("Boş Geçilemez")
.email("Geçerli bir email giriniz!"),
password: yup
.string()
.required("Boş Geçilemez")
.min(6, ({ min }) => 'Şifre en az' + min + 'karakterden olmalıdır')
});
return (
<SafeAreaView style={{ width: '100%', height: '100%' }}>
<View style={{
width: '100%',
height: '90%',
alignItems: 'center',
justifyContent: 'center'
}}>
<View style={{
width: '75%',
alignItems: 'center',
padding: 10,
backgroundColor: '#ddd',
borderRadius: 30
}}>
<Text style={{fontSize:24,color:'#000'}}>Üye Girişi</Text>
<Formik
validationSchema={loginValidationSchema}
initialValues={{ email: '', password: '' }}
onSubmit={values => login(values.email, values.password)}>
{({ handleChange, handleBlur, handleSubmit, values, errors, isValid,
}) => (
<>
<TextInput
name="email"
placeholder='Email Adresiniz'
style={{
height: 50,
width: '90%',
margin: 10,
borderColor: '#000',
borderWidth: 1,
borderRadius: 10,
padding: 10,
fontSize: 16
}}
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}
keyboardType="email-address"
/>
{errors.email && <Text style={{ color: '#f00', fontSize: 14 }}>{errors.email}</Text>}
<TextInput
name="password"
placeholder='Şifreniz'
style={{
height: 50,
width: '90%',
margin: 10,
borderColor: '#000',
borderWidth: 1,
borderRadius: 10,
padding: 10,
fontSize: 16
}}
onChangeText={handleChange('password')}
onBlur={handleBlur('password')}
value={values.password}
keyboardType="visible-password"
secureTextEntry
/>
{errors.password && (<Text style={{ color: '#f00', fontSize: 14 }}>{errors.password}</Text>)}
<View style={{ width: '60%' }}>
<Button style={{margin:10}}
color='#d55'
onPress={handleSubmit}
disabled={!isValid}
title="Giriş" />
</View>
</>
)}
</Formik>
</View>
</View>
<View style={{
backgroundColor: '#fff',
width: '100%',
height: 75,
bottom: 0,
position: 'absolute',
flexDirection: 'row'
}}>
<TouchableOpacity style={{
flex: 1,
}} onPress={() => {
navigation.navigate("LoginScreen")
}}>
<View style={{
backgroundColor: '#fff',
flex: 1,
height: 75,
bottom: 0,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}>
<IconFA5 name='user-shield' color={'#d55'} size={30} />
<Text style={{ fontSize: 20, color: '#d55' }}>Giriş Yap</Text>
</View></TouchableOpacity>
<TouchableOpacity style={{
flex: 1,
}} onPress={() => {
navigation.navigate("SignUpScreen")
}}>
<View style={{
backgroundColor: '#fff',
flex: 1,
height: 75,
bottom: 0,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}>
<IconFA5 name='user-plus' color={color} size={30} />
<Text style={{ fontSize: 20, color: color }}>Kayıt OL</Text>
</View></TouchableOpacity>
<TouchableOpacity style={{
flex: 1,
}} onPress={() => {
navigation.navigate("ResetPasswordScreen")
}}>
<View style={{
backgroundColor: '#fff',
flex: 1,
height: 75,
bottom: 0,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}>
<IconFA5 name='key' color={color} size={30} />
<Text style={{ fontSize: 20, color: color }}>Şifre Değiştir</Text>
</View></TouchableOpacity>
</View>
</SafeAreaView>
)
}
export default LoginScreen

You can check this article about the authentication flows. https://reactnavigation.org/docs/auth-flow/
Basically it's about the conditional rendering. You should store state about isLogin (async-storage etc.)
return (
<NavigationContainer>
<Stack.Navigator>
isLogin ? (
<>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</>
) : (
<>
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
</>
);
</Stack.Navigator>
</NavigationContainer>
)

React Navigation Prevents text input from focusing at first try

Hello Everyone i have the exact same problem with this one. but the question has no answer yet
im stuck with this all day there is no answer to found i am using the latest react native and latest react navigation package
React navigation focus on input blurs immediately
so this is my form page where at the first load blurs text input when i click the text box
import React, { Component } from 'react'
import { View, Dimensions } from 'react-native'
import {
Container,
Content,
Button,
Text,
Form,
Item,
Input,
Label,
Textarea
} from 'native-base';
import Ion from 'react-native-vector-icons/Ionicons'
class Compose extends Component{
render(){
return(
<Container>
<Content>
<Form style={{ padding: 10 }}>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="ios-person" size={25} style={{ marginRight: 12 }}/>
<Label>Product Name*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-pricetags" size={25} style={{ marginRight: 12 }}/>
<Label>Price*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-arrow-down" size={25} style={{ marginRight: 12 }}/>
<Label>Drop rate*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-phone-portrait" size={25} style={{ marginRight: 12 }}/>
<Label>Contact number*</Label>
<Input
/>
</Item>
<Textarea
rowSpan={5} bordered
placeholder="Description"
style={{ marginBottom: 15 }}
/>
<Button block success style={{ height: 60, marginBottom: 14 }}>
<Ion name="md-images" size={25} style={{ color: 'white' }}/>
<Text style={{ fontSize: 20 }}>Upload Photos</Text>
</Button>
<Button block danger>
<Ion name="ios-cellular" size={25} style={{ color: 'white' }}/>
<Text>Broadcast</Text>
</Button>
</Form>
</Content>
</Container>
)
}
}
export default Compose
and here is my navigation component
import React, { Component } from 'react';
import { Text } from 'react-native'
//Navigation
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator, TransitionPresets } from '#react-navigation/stack';
//Screens
import { Welcome, Compose } from './src/index'
import {
Header,
Left,
Button,
Icon,
Body,
Title,
Right
}
from 'native-base'
const Stack = createStackNavigator();
const AppbarList = {
welcome: function(navigation){
return null
},
compose: function(navigation){
return (
<Header>
<Left>
<Button transparent rounded>
<Icon name='arrow-back' onPress={()=>{ navigation.goBack() }}/>
</Button>
</Left>
<Body>
<Title></Title>
</Body>
<Right />
</Header>
)
}
}
const Appbar = ( scene, navigation )=> {
const { options } = scene.descriptor;
const title = scene.route.name;
return AppbarList[title.toLowerCase()](navigation)
}
class App extends Component{
render(){
return(
<NavigationContainer>
<Stack.Navigator
headerMode="screen"
screenOptions={{
header: ({ navigation, scene, previous }) => Appbar( scene, navigation )
}}
>
<Stack.Screen
name="Welcome" component={Welcome}
options={{
...TransitionPresets.FadeFromBottomAndroid,
}}
/>
<Stack.Screen
name="Compose" component={Compose}
options={{
...TransitionPresets.FadeFromBottomAndroid,
}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
export default App;

I faced the same problem. Try to disable gestures for Android.
export default () => {
const isAndroidPlatform = isAndroid();
return {
mode: 'modal',
headerMode: 'none',
defaultNavigationOptions: {
gestureEnabled: !isAndroidPlatform,
cardOverlayEnabled: true,
...(
isAndroidPlatform
? TransitionPresets.FadeFromBottomAndroid
: TransitionPresets.ModalPresentationIOS
),
},
};
};

Material-UI styles: convert functional component to class component

So I try the following code to convert a functional component to the classical component, it kinda worked, no error but styles are not applied.
import { makeStyles } from '#material-ui/core/styles';
import { withStyles } from '#material-ui/core/styles';
const playtheMusic = () => {
pauseMusic();
};
const pausetheMusic = () => {
pauseMusic();
};
const useStyles = makeStyles(theme => ({
text: {
padding: 50
},
paper: {
paddingBottom: 50
},
list: {
marginBottom: theme.spacing(2)
},
subheader: {
backgroundColor: theme.palette.background.paper
},
appBar: {
top: 'auto',
bottom: 0,
backgroundColor: '#282828',
padding: '15px'
},
grow: {
flexGrow: 1
}
}));
class BottomAppBar extends React.Component {
// const classes = useStyles();
render() {
const { classes } = this.props;
return (
<div>
<AppBar position="fixed" className={classes.appBar}>
<div style={{ display: 'flex', alignItems: 'center', alignContent: 'center' }}>
<div>
<Typography style={{ fontSize: 15 }}> Stress Out </Typography>
<br />
<Typography style={{ fontSize: 12, color: '#B3B3B3' }}>
Twenty One Pilots
</Typography>
</div>
<div className={classes.grow} />
<div>
<IconButton style={{ color: 'white' }}>
<ShuffleIcon />
</IconButton>
<IconButton style={{ color: 'white' }}>
<SkipPreviousRoundedIcon style={{ fontSize: 30 }} />
</IconButton>
<IconButton onClick={pausetheMusic} style={{ color: 'white' }}>
<PauseCircleOutlineRoundedIcon style={{ fontSize: 46 }} />
<PlayCircleOutlineIcon style={{ fontSize: 46, display: 'none' }} />
</IconButton>
<IconButton style={{ color: 'white' }}>
<SkipNextRoundedIcon style={{ fontSize: 30 }} />
</IconButton>
<IconButton style={{ color: 'white' }}>
<RepeatIcon />
</IconButton>
</div>
<div className={classes.grow} />
<div>
<IconButton style={{ color: 'white' }}>
<VolumeUpIcon />
</IconButton>
</div>
</div>
</AppBar>
</div>
);
}
}
export default withStyles(useStyles)(BottomAppBar);
also, there is a problem with StackOverflow. it says "It looks like your post is mostly code; please add some more details". that's the reason I'm writing some unnecessary things XD
you can skip it.
Thanks for reading. have a good day <3

A common approach for material-ui component styling:
Classical
withStyles (High order function) + createStyles
Functional
useStyles (hooks) + makeStyles
In your code, you shall not use the hooks useStyles inside withStyle, hooks shouldn't be used inside any classical component,
Wrong here
export default withStyles(useStyles)(BottomAppBar);
Right example
import { withStyles, createStyles } from "#material-ui/core/styles";
const styles = theme => createStyles({
root: {
},
// ...
});
...
const { classes } = this.props;
...
export default withStyles(styles)(App);
Online sample for both classical component and functional component styling