sass with compass - compile error - sass

I try to use my private sass files together with compass and I get following error:
"sass file.scss:file.css
Syntax error: (“lighten-5”: #ffebee, “lighten-4”: #ffcdd2, “lighten-3”: #ef9a9a, “lighten-2”: #e57373, “lighten-1”: #ef5350, “base”: #f44336, “darken-1”: #e53935, “darken-2”: #d32f2f, “darken-3”: #c62828, “darken-4”: #b71c1c, “accent-1”: #ff8a80, “accent-2”: #ff5252, “accent-3”: #ff1744, “accent-4”: #d50000) isn’t a valid CSS value."
And here is my .scss file which seems to cause the problem.
$m-red: (
"lighten-5": #fdeaeb,
"lighten-4": #f8c1c3,
"lighten-3": #f3989b,
"lighten-2": #ee6e73,
"lighten-1": #ea454b,
"base": #e51c23,
"darken-1": #d0181e,
"darken-2": #b9151b,
"darken-3": #a21318,
"darken-4": #8b1014,
);
$red: (
"lighten-5": #FFEBEE,
"lighten-4": #FFCDD2,
"lighten-3": #EF9A9A,
"lighten-2": #E57373,
"lighten-1": #EF5350,
"base": #F44336,
"darken-1": #E53935,
"darken-2": #D32F2F,
"darken-3": #C62828,
"darken-4": #B71C1C,
"accent-1": #FF8A80,
"accent-2": #FF5252,
"accent-3": #FF1744,
"accent-4": #D50000
);
$pink: (
"lighten-5": #fce4ec,
"lighten-4": #f8bbd0,
"lighten-3": #f48fb1,
"lighten-2": #f06292,
"lighten-1": #ec407a,
"base": #e91e63,
"darken-1": #d81b60,
"darken-2": #c2185b,
"darken-3": #ad1457,
"darken-4": #880e4f,
"accent-1": #ff80ab,
"accent-2": #ff4081,
"accent-3": #f50057,
"accent-4": #c51162
);
$purple: (
"lighten-5": #f3e5f5,
"lighten-4": #e1bee7,
"lighten-3": #ce93d8,
"lighten-2": #ba68c8,
"lighten-1": #ab47bc,
"base": #9c27b0,
"darken-1": #8e24aa,
"darken-2": #7b1fa2,
"darken-3": #6a1b9a,
"darken-4": #4a148c,
"accent-1": #ea80fc,
"accent-2": #e040fb,
"accent-3": #d500f9,
"accent-4": #aa00ff
);
$deep-purple: (
"lighten-5": #ede7f6,
"lighten-4": #d1c4e9,
"lighten-3": #b39ddb,
"lighten-2": #9575cd,
"lighten-1": #7e57c2,
"base": #673ab7,
"darken-1": #5e35b1,
"darken-2": #512da8,
"darken-3": #4527a0,
"darken-4": #311b92,
"accent-1": #b388ff,
"accent-2": #7c4dff,
"accent-3": #651fff,
"accent-4": #6200ea
);
$indigo: (
"lighten-5": #e8eaf6,
"lighten-4": #c5cae9,
"lighten-3": #9fa8da,
"lighten-2": #7986cb,
"lighten-1": #5c6bc0,
"base": #3f51b5,
"darken-1": #3949ab,
"darken-2": #303f9f,
"darken-3": #283593,
"darken-4": #1a237e,
"accent-1": #8c9eff,
"accent-2": #536dfe,
"accent-3": #3d5afe,
"accent-4": #304ffe
);
$blue: (
"lighten-5": #E3F2FD,
"lighten-4": #BBDEFB,
"lighten-3": #90CAF9,
"lighten-2": #64B5F6,
"lighten-1": #42A5F5,
"base": #2196F3,
"darken-1": #1E88E5,
"darken-2": #1976D2,
"darken-3": #1565C0,
"darken-4": #0D47A1,
"accent-1": #82B1FF,
"accent-2": #448AFF,
"accent-3": #2979FF,
"accent-4": #2962FF
);
$light-blue: (
"lighten-5": #e1f5fe,
"lighten-4": #b3e5fc,
"lighten-3": #81d4fa,
"lighten-2": #4fc3f7,
"lighten-1": #29b6f6,
"base": #03a9f4,
"darken-1": #039be5,
"darken-2": #0288d1,
"darken-3": #0277bd,
"darken-4": #01579b,
"accent-1": #80d8ff,
"accent-2": #40c4ff,
"accent-3": #00b0ff,
"accent-4": #0091ea
);
$cyan: (
"lighten-5": #e0f7fa,
"lighten-4": #b2ebf2,
"lighten-3": #80deea,
"lighten-2": #4dd0e1,
"lighten-1": #26c6da,
"base": #00bcd4,
"darken-1": #00acc1,
"darken-2": #0097a7,
"darken-3": #00838f,
"darken-4": #006064,
"accent-1": #84ffff,
"accent-2": #18ffff,
"accent-3": #00e5ff,
"accent-4": #00b8d4
);
$teal: (
"lighten-5": #e0f2f1,
"lighten-4": #b2dfdb,
"lighten-3": #80cbc4,
"lighten-2": #4db6ac,
"lighten-1": #26a69a,
"base": #009688,
"darken-1": #00897b,
"darken-2": #00796b,
"darken-3": #00695c,
"darken-4": #004d40,
"accent-1": #a7ffeb,
"accent-2": #64ffda,
"accent-3": #1de9b6,
"accent-4": #00bfa5
);
$green: (
"lighten-5": #E8F5E9,
"lighten-4": #C8E6C9,
"lighten-3": #A5D6A7,
"lighten-2": #81C784,
"lighten-1": #66BB6A,
"base": #4CAF50,
"darken-1": #43A047,
"darken-2": #388E3C,
"darken-3": #2E7D32,
"darken-4": #1B5E20,
"accent-1": #B9F6CA,
"accent-2": #69F0AE,
"accent-3": #00E676,
"accent-4": #00C853
);
$light-green: (
"lighten-5": #f1f8e9,
"lighten-4": #dcedc8,
"lighten-3": #c5e1a5,
"lighten-2": #aed581,
"lighten-1": #9ccc65,
"base": #8bc34a,
"darken-1": #7cb342,
"darken-2": #689f38,
"darken-3": #558b2f,
"darken-4": #33691e,
"accent-1": #ccff90,
"accent-2": #b2ff59,
"accent-3": #76ff03,
"accent-4": #64dd17
);
$lime: (
"lighten-5": #f9fbe7,
"lighten-4": #f0f4c3,
"lighten-3": #e6ee9c,
"lighten-2": #dce775,
"lighten-1": #d4e157,
"base": #cddc39,
"darken-1": #c0ca33,
"darken-2": #afb42b,
"darken-3": #9e9d24,
"darken-4": #827717,
"accent-1": #f4ff81,
"accent-2": #eeff41,
"accent-3": #c6ff00,
"accent-4": #aeea00
);
$yellow: (
"lighten-5": #fffde7,
"lighten-4": #fff9c4,
"lighten-3": #fff59d,
"lighten-2": #fff176,
"lighten-1": #ffee58,
"base": #ffeb3b,
"darken-1": #fdd835,
"darken-2": #fbc02d,
"darken-3": #f9a825,
"darken-4": #f57f17,
"accent-1": #ffff8d,
"accent-2": #ffff00,
"accent-3": #ffea00,
"accent-4": #ffd600
);
$amber: (
"lighten-5": #fff8e1,
"lighten-4": #ffecb3,
"lighten-3": #ffe082,
"lighten-2": #ffd54f,
"lighten-1": #ffca28,
"base": #ffc107,
"darken-1": #ffb300,
"darken-2": #ffa000,
"darken-3": #ff8f00,
"darken-4": #ff6f00,
"accent-1": #ffe57f,
"accent-2": #ffd740,
"accent-3": #ffc400,
"accent-4": #ffab00
);
$orange: (
"lighten-5": #fff3e0,
"lighten-4": #ffe0b2,
"lighten-3": #ffcc80,
"lighten-2": #ffb74d,
"lighten-1": #ffa726,
"base": #ff9800,
"darken-1": #fb8c00,
"darken-2": #f57c00,
"darken-3": #ef6c00,
"darken-4": #e65100,
"accent-1": #ffd180,
"accent-2": #ffab40,
"accent-3": #ff9100,
"accent-4": #ff6d00
);
$deep-orange: (
"lighten-5": #fbe9e7,
"lighten-4": #ffccbc,
"lighten-3": #ffab91,
"lighten-2": #ff8a65,
"lighten-1": #ff7043,
"base": #ff5722,
"darken-1": #f4511e,
"darken-2": #e64a19,
"darken-3": #d84315,
"darken-4": #bf360c,
"accent-1": #ff9e80,
"accent-2": #ff6e40,
"accent-3": #ff3d00,
"accent-4": #dd2c00
);
$brown: (
"lighten-5": #efebe9,
"lighten-4": #d7ccc8,
"lighten-3": #bcaaa4,
"lighten-2": #a1887f,
"lighten-1": #8d6e63,
"base": #795548,
"darken-1": #6d4c41,
"darken-2": #5d4037,
"darken-3": #4e342e,
"darken-4": #3e2723
);
$blue-grey: (
"lighten-5": #eceff1,
"lighten-4": #cfd8dc,
"lighten-3": #b0bec5,
"lighten-2": #90a4ae,
"lighten-1": #78909c,
"base": #607d8b,
"darken-1": #546e7a,
"darken-2": #455a64,
"darken-3": #37474f,
"darken-4": #263238
);
$grey: (
"lighten-5": #fafafa,
"lighten-4": #f5f5f5,
"lighten-3": #eeeeee,
"lighten-2": #e0e0e0,
"lighten-1": #bdbdbd,
"base": #9e9e9e,
"darken-1": #757575,
"darken-2": #616161,
"darken-3": #424242,
"darken-4": #212121
);
$shades: (
"black": #000000,
"white": #FFFFFF,
"transparent": transparent
);
$colors: (
"m-red": $m-red,
"red": $red,
"pink": $pink,
"purple": $purple,
"deep-purple": $deep-purple,
"indigo": $indigo,
"blue": $blue,
"light-blue": $light-blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"light-green": $light-green,
"lime": $lime,
"yellow": $yellow,
"amber": $amber,
"orange": $orange,
"deep-orange": $deep-orange,
"brown": $brown,
"blue-grey": $blue-grey,
"grey": $grey,
"shades": $shades
);
Without compass everything compiles perfect. What's wrong with the file above?
Edit:
Isolated code:
$new_m-red: ( lighten-5: #fdeaeb);
$new_colors: ( "m-red": $m-red);
// Color Classes
#each $color_name,
$color in $new_colors {
#each $color_type,
$color_value in $color{
#if $color_type=="base" {
.#{$color_name} {
background-color: $color_value !important;
}
.#{$color_name}-text {
color: $color_value !important;
}
}
#else {
.#{$color_name}.#{$color_type} {
background-color: $color_value !important;
}
.#{$color_name}-text.text-#{$color_type} {
color: $color_value !important;
}
}
}
}
Compass version:
Compass 1.0.3 (Polaris)
SASS Sass 3.4.19 (Selective Steve)
error:
modified /sass/file/_color.scss
error /sass/file.scss (Line 49 of /sass/file/_color.scss: ("lighten-5": #fdeaeb) isn't a valid CSS value.)
I tried without quotes:
modified /sass/file/_color.scss
error /sass/file.scss (Line 49 of /sass/file/free/_color.scss: (lighten-5: #fdeaeb) isn't a valid CSS value.)

Related

Getting undeifined value when passing data from one screen to another screen in react-native

When I am trying to pass data from Login screen to MyProfile screen then I got undefined value.
I am confused that why I am getting undefined value ?
Here is code of my main navigation files.
route.js
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer, getFocusedRouteNameFromRoute } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { createDrawerNavigator } from "#react-navigation/drawer";
import LoginScreen from "./../screens/Login/index.js";
import MyProfileScreen from "../screens/MyProfile/index.js";
import AboutUsScreen from "../screens/AboutUs/index.js";
import SettingScreen from "../screens/Setting/index.js";
import { Image, StyleSheet, View, TouchableOpacity } from "react-native";
import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';
import { RFValue } from "react-native-responsive-fontsize"
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const NavigationDrawerStructure = (props) => {
const toggleDrawer = () => {
props.navigationProps.toggleDrawer();
}
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={() => toggleDrawer()}>
<Image
source={{ uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png' }}
style={{
width: 25,
height: 25,
marginLeft: 5
}}
/>
</TouchableOpacity>
</View>
)
}
const geHeaderTitle = (route) => {
const routeName = getFocusedRouteNameFromRoute(route) ?? 'MyProfileScreen';
switch (routeName) {
case 'MyProfileScreen':
return 'Profile';
case 'AboutUsScreen':
return 'AboutUs';
case 'SettingScreen':
return 'Setting';
}
}
const BottomTab = () => {
return (
<Tab.Navigator initialRouteName="MyProfileScreen"
tabBarOptions={{
activeTintColor: "red",
labelStyle: {
fontSize: RFValue('14'),
marginTop: 5
},
style: { height: hp('11') }
}}
>
<Tab.Screen
name="MayProfileScreen"
component={MyProfileScreen}
options={{
tabBarLabel: 'Profile',
tabBarIcon: ({ focused }) => (
focused ?
<Image source={require('./../../asstes/images/profile.png')} style={styles.activeImg} /> :
<Image source={require('./../../asstes/images/profile.png')} style={styles.deActiveImg} />
)
}}
/>
<Tab.Screen
name="AboutUsScreen"
component={AboutUsScreen}
options={{
tabBarLabel: 'AboutUs',
tabBarIcon: ({ focused }) => (
focused ?
<Image source={require('./../../asstes/images/aboutus.png')} style={styles.activeImg} /> :
<Image source={require('./../../asstes/images/aboutus.png')} style={styles.deActiveImg} />
)
}}
/>
<Tab.Screen
name="SettingScreen"
component={SettingScreen}
options={{
tabBarLabel: 'Setting',
tabBarIcon: ({ focused }) => (
focused ?
<Image source={require('./../../asstes/images/setting.png')} style={styles.activeImg} /> :
<Image source={require('./../../asstes/images/setting.png')} style={styles.deActiveImg} />
)
}}
/>
</Tab.Navigator>
)
}
const HomeStack = ({ navigation }) => {
return (
<Stack.Navigator initialRouteName="LoginScreen">
<Stack.Screen name="LoginScreen" component={LoginScreen} options={{ headerShown: false }} />
<Stack.Screen name="MyProfileScreen" component={BottomTab}
options={({ route }) => ({
headerTitle: geHeaderTitle(route),
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
title: 'Profile',
headerStyle: { backgroundColor: '#f4511e' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' }
})}
/>
<Stack.Screen name="AboutUsScreen" component={AboutUsScreen}
options={{
title: 'AboutUS',
headerStyle: { backgroundColor: '#f4511e' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' }
}} />
<Stack.Screen name="SettingScreen" component={SettingScreen}
options={{
title: 'Setting',
headerStyle: { backgroundColor: '#f4511e' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' }
}}
/>
</Stack.Navigator>
)
}
const AboutUsStack = ({ navigation }) => {
return (
<Stack.Navigator initialRouteName="AboutUsScreen"
screenOptions={{
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
headerStyle: { backgroundColor: '#f4511e' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' }
}}
>
<Stack.Screen name="AboutUsScreen" component={AboutUsScreen} options={{ title: 'AboutUs' }} />
</Stack.Navigator>
)
}
const SettingStack = ({ navigation }) => {
return (
<Stack.Navigator initialRouteName="SettingScreen"
screenOptions={{
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
headerStyle: { backgroundColor: '#f4511e' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' }
}}
>
<Stack.Screen name="SettingScreen" component={SettingScreen} options={{ title: 'Setting', }} />
</Stack.Navigator>
)
}
const Navigation = () => {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#e91e63',
itemStyle: { marginVertical: 5 }
}}
>
<Drawer.Screen name="HomeStack" options={{ drawerLabel: 'Profile' }} component={HomeStack} />
<Drawer.Screen name="AboutUsStack" component={AboutUsStack} options={{ drawerLabel: 'AboutUs' }} />
<Drawer.Screen name="SettingStack" component={SettingStack} options={{ drawerLabel: 'Setting' }} />
</Drawer.Navigator>
</NavigationContainer>
)
}
const styles = StyleSheet.create({
activeImg: {
height: hp('4.8'), width: wp('8.5'), marginTop: 10, borderRadius: 12, tintColor: 'red'
},
deActiveImg: {
height: hp('4.8'), width: wp('8.5'), marginTop: 10, borderRadius: 12, tintColor: 'gray'
}
})
export default Navigation;
I am calling below function when user click on Login button.
Here is some lines of code that how I am trying to pass data from Login screen to MyProfile screen
Login screen
const resetTextInput = () => {
setName(null);
setPassword(null);
navigation.navigate('MyProfileScreen', { userName: name, userPwd: password,});
}
<TouchableOpacity style={styles.loginBtn} onPress={() => { resetTextInput() }}>
<Text style={styles.loginBtnTxt}>Login</Text>
</TouchableOpacity>
Here is some lines of code that how I am trying to get data from Login screen to MyProfile screen.
MyProfle screen
useEffect(() => {
console.log("username is-->",JSON.stringify(route?.params?.userName));
console.log("userpassword is-->",JSON.stringify(route?.params?.userPwd));
});
Perhaps pass route.params? as an argument inside your useEffect?
useEffect(() => {
...
},[route.params?]);
That way it'll apply the effect when you navigate into it.
Do you have a multiple stack navigator? If you are at different stack navigator and you want to pass params to a screen from different stack navigator, you have to specify the screen.
For example you are at the AuthStack and you want to navigate to MyProfileScreen from the ProfileStack:
navigation.navigate('ProfileStack', { screen: 'MyProfileScreen', params: { //data here } });
if not, I think you got a typo in your BottomTab component. Change the name of the first tab from "MayProfileScreen" to "MyProfileScreen".
then use this to navigate:
navigation.navigate('MyProfileScreen', { //params here });

Objects don't overlap when rotating

I'm trying to reproduce this animation (see below) with react-three-fiber. I'm still very new to this package and to three-js.
http://makesportmakebook.com/livres/.
I've been able to do create book shapes with meshLambertMaterial, as such:
function Book(props) {
const mesh = useRef();
useFrame(() => {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01
})
const bookCover = useLoader(TextureLoader, bookCoverImg)
const bookSpine = useLoader(TextureLoader, bookSpineImg)
const bookBack = useLoader(TextureLoader, bookBackImg)
const bookPages = useLoader(TextureLoader, bookPagesImg)
const bookPagesTexture = useLoader(TextureLoader, bookPagesTextureImg)
const bookPagesTopBottomTexture = useLoader(TextureLoader, bookPagesTopBottomTextureImg)
return (
<mesh
position={props.position}
ref={mesh}>
<boxBufferGeometry attach="geometry" args={
[
7, 10, 1.2, 4, 4, 1
]
} />
<meshLambertMaterial color={"0xffffff"} map={bookCover} />
<meshLambertMaterial map={bookSpine} />
<meshLambertMaterial map={bookBack} />
<meshLambertMaterial map={bookPages} />
<meshLambertMaterial map={texture_5} />
<meshLambertMaterial map={texture_6} />
</mesh>
)
};
Here's a code sandbox of my code so far: https://codesandbox.io/s/cocky-fast-61ndj
My question is: how can I avoid the overlap of these you can see here (below) but still keep the same parallel position we can see in the first example?
There are two ways that you could handle this. The first is to move the camera instead of the books. The second is that instead of moving the books separately, move them as a group. I suspect that this second method is what you want to do.
This was quick and dirty, but it works.
Create a function to house the two books. Put the two books in a group and rotate the group.
import React, { useRef, Suspense } from "react";
import { Canvas, useFrame, extend, useLoader } from "react-three-fiber";
import { OrbitControls, StandardEffects, draco } from "drei";
import { TextureLoader } from "three/src/loaders/TextureLoader.js";
extend({ OrbitControls });
function Bookshelf(props) {
const mesh = useRef();
useFrame(() => {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01;
});
return (
<group ref={mesh} position={[0, 0, 0]}>
<Suspense fallback={null}><Book position={[3, 0, 3]} /></Suspense>
<Suspense fallback={null}><Book position={[-3, 0, 0]} /></Suspense>
</group>
)
}
function Book(props) {
const bookCover = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732427/HEAD_PUBLISHING/book-cover.jpg"
);
const bookSpine = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732420/HEAD_PUBLISHING/book-back.jpg"
);
const bookBack = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732421/HEAD_PUBLISHING/book-side.jpg"
);
const bookPages = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732421/HEAD_PUBLISHING/book-side.jpg"
);
const texture_5 = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732427/HEAD_PUBLISHING/book-cover.jpg"
);
const texture_6 = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732421/HEAD_PUBLISHING/book-spine.jpg"
);
return (
<mesh position={props.position} >
<boxBufferGeometry attach="geometry" args={[7, 10, 1.2, 4, 4, 1]} />
<meshLambertMaterial color={"0xffffff"} map={bookCover} />
<meshLambertMaterial map={bookSpine} />
<meshLambertMaterial map={bookBack} />
<meshLambertMaterial map={bookPages} />
<meshLambertMaterial map={texture_5} />
<meshLambertMaterial map={texture_6} />
</mesh>
);
}
export default function App() {
let styling = {
width: "100vw",
height: "100vh",
position: "relative"
};
return (
<div style={{ position: "relative" }}>
<Canvas camera={{ position: [0, 0, 20] }} style={styling}>
<ambientLight intensity={0.3} />
<directionalLight intensity={1} />
<Suspense fallback={null}>
<Bookshelf>
</Bookshelf>
</Suspense>
<OrbitControls enableZoom={false} />
</Canvas>
</div>
);
}

Flatlist - Set height and scroll

I need help in setting correctly a Flatlist in my React Native app.
What I need is:
I have a View
Inside that view i have a title on top and a bottom below.
Between I want to insert a Flatlist that displays a list of elements, but i want a fixed height and scroll capability to see all elements from the list.
Part of my code:
return (
<Container theme={theme}>
<TitleContainer theme={theme}>
<Title theme={theme}>Destino da publicação:</Title>
</TitleContainer>
<ButtonContainer>
<Option theme={theme} onPress={() => setView('contacts')}>
<Texto theme={theme}>Contactos</Texto>
</Option>
<Option theme={theme} onPress={() => setView('groups')}>
<Texto theme={theme}>Grupos</Texto>
</Option>
</ButtonContainer>
<ContactContainer>
{view === 'contacts' && (
<FlatList
key="contactList"
data={contactListFiltered}
renderItem={renderItemContact}
ListEmptyComponent={() => (
<Text
style={{
color: `${theme.mainColor}`,
textAlign: 'center',
fontSize: VMHSize(811, 14),
}}
>
Sem contatos
</Text>
)}
keyExtractor={(item) => item.email}
/>
)}
{view === 'groups' && (
<FlatList
key="groupListShare"
data={groupListFiltered}
renderItem={renderItemGroup}
ListEmptyComponent={() => (
<Text
style={{
color: `${theme.mainColor}`,
textAlign: 'center',
fontSize: VMHSize(811, 14),
}}
>
Não existem grupos criados
</Text>
)}
keyExtractor={(item) => item}
/>
)}
<ButtonContainer>
<Option onPress={close} theme={theme}>
<MaterialCommunityIcons
name="cancel"
size={VMHSize(811, 25)}
color={theme.mainColor}
/>
<OptionText theme={theme}>Cancelar</OptionText>
</Option>
</ButtonContainer>
</ContactContainer>
</Container>
);
};
I already tried many suggestions I readed, but or the flatlist appears with the height I want but i cant scroll the content, or the flatlist renders all elements pushing the bellow content of the view to outside the view.
To explain the idea if the code:
I´m building a social media app, something alike facebook. I have a view Posts, where i have a flatlist that displays the posts from the feed for the user.
Then, each post have a Options button with many options, one is to share the post with another friend. In the code above, i need to show in a view with a fixed height, a list with the friends. If i have many friends, i need to scroll that list within the limited size view. I´m using another flatlist to list the friends.
Can anybody help me? Thanks!
Well, I resolved my problem with a ScrollView and nestedScrollEnabled prop.
<ScrollView style={{ height: VMHSize(811, 300) }} nestedScrollEnabled>
{view === 'contacts' && (
<FlatList
key="contactList"
data={contactListFiltered}
renderItem={renderItemContact}
ListEmptyComponent={() => (
<Text
style={{
color: `${theme.mainColor}`,
textAlign: 'center',
fontSize: VMHSize(811, 14),
}}
>
Sem contatos
</Text>
)}
keyExtractor={(item) => item.email}
/>
)}
{view === 'groups' && (
<FlatList
key="groupListShare"
data={groupListFiltered}
renderItem={renderItemGroup}
ListEmptyComponent={() => (
<Text
style={{
color: `${theme.mainColor}`,
textAlign: 'center',
fontSize: VMHSize(811, 14),
}}
>
Não existem grupos criados
</Text>
)}
keyExtractor={(item, index) => item + index}
/>
)}
</ScrollView>

TypeError: undefined is not an object (evaluating 'route.params.prodId')

i want to navigate to other screen while clicking on icon in naviagtion and passing a value but there is error
here is the component from where i want to navigate through passing the values
const UserProductScreen = (props) => {
const userProducts = useSelector((state) => state.products.userProducts);
const dispatch = useDispatch();
const editProductHandler = (id) => {
props.navigation.navigate('editProduct', {
prodId: id,
});
};
return (
<FlatList
data={userProducts}
keyExtractor={(item) => item.id}
renderItem={(itemData) => (
<ProductItem
image={itemData.item.imageUrl}
title={itemData.item.title}
price={itemData.item.price}
onselect={() => {
editProductHandler(itemData.item.id);
}}>
<Button
title="Edit"
onPress={() => {
editProductHandler(itemData.item.id);
}}
/>
<Button
title="Delete"
onPress={() => {
dispatch(productAction.deleteProduct(itemData.item.id));
}}
/>
</ProductItem>
)}
/>
);
};
export default UserProductScreen;
here is the component in which i receive the value passed by other component
const EditProductScreen = ({route, navigation}) => {
const {prodId} = route.params;
const editedProduct = useSelector((state) =>
state.products.userProducts.find((prod) => prod.id === prodId),
);
const [title, setTitle] = useState(editedProduct ? editedProduct.title : '');
const [imageUrl, setImageUrl] = useState(
editedProduct ? editedProduct.imageUrl : '',
);
const [price, setPrice] = useState('');
const [description, setDescription] = useState(
editedProduct ? editedProduct.description : '',
);
const dispatch = useDispatch();
return (
<ScrollView>
<View style={styles.form}>
<View style={styles.formControl}>
<Text style={styles.label}>Title</Text>
<TextInput
style={styles.input}
value={title}
onChangeText={(text) => setTitle(text)}
/>
</View>
<View style={styles.formControl}>
<Text style={styles.label}>Image url</Text>
<TextInput
style={styles.input}
value={imageUrl}
onChangeText={(text) => setImageUrl(text)}
/>
</View>
{editedProduct ? null : (
<View style={styles.formControl}>
<Text style={styles.label}>Price</Text>
<TextInput
style={styles.input}
value={price}
onChangeText={(text) => setPrice(text)}
/>
</View>
)}
<View style={styles.formControl}>
<Text style={styles.label}>Description</Text>
<TextInput
style={styles.input}
value={description}
onChangeText={(text) => setDescription(text)}
/>
</View>
{editedProduct ? (
<Button
title="updated"
onPress={() => {
dispatch(
productsAction.updateProduct(
prodId,
title,
description,
imageUrl,
),
);
}}
/>
) : (
<Button
title="Add product"
onPress={() => {
dispatch(
productsAction.createProduct(
title,
description,
imageUrl,
price,
),
);
}}
/>
)}
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
form: {
margin: 20,
},
formControl: {
width: '100%',
},
label: {
marginVertical: 8,
},
input: {
paddingHorizontal: 2,
paddingVertical: 5,
borderBottomColor: '#ccc',
borderBottomWidth: 1,
},
});
export default EditProductScreen;
here is the file in which navigation code exists
const Stack = createStackNavigator();
const Stackorder = createStackNavigator();
const StackUserProduct = createStackNavigator();
const Drawer = createDrawerNavigator();
const stacknavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Product"
component={ProductOverviewScreen}
options={({navigation}) => ({
headerTitle: 'Products',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate('Cart')}>
<Icon name="cart-plus" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="Detail"
component={ProductDetailScreen}
options={{
headerTitle: 'Detail',
headerTintColor: '#EBF2FA',
headerStyle: {
backgroundColor: '#273469',
},
}}
/>
<Stack.Screen
name="Cart"
component={CartScreen}
options={{
headerTitle: 'Orders',
headerTintColor: '#EBF2FA',
headerStyle: {
backgroundColor: '#273469',
},
}}
/>
<Stack.Screen
name="order"
component={OrderScreen}
options={({navigation}) => ({
headerTitle: 'Order',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
};
const stacknavigatorOrder = () => {
return (
<Stackorder.Navigator>
<Stack.Screen
name="order"
component={OrderScreen}
options={({navigation}) => ({
headerTitle: 'Order',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
</Stackorder.Navigator>
);
};
const stacknavigatorUserProduct = () => {
return (
<StackUserProduct.Navigator>
<Stack.Screen
name="userProduct"
component={UserProductScreen}
options={({navigation}) => ({
headerTitle: 'User Products',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerRight: () => (
<TouchableOpacity
onPress={() => navigation.navigate('editProduct')}>
<Icon name="pencil" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="editProduct"
component={EditProductScreen}
options={({navigation}) => ({
headerTitle: 'User Products',
headerStyle: {
backgroundColor: '#273469',
},
headerTintColor: '#EBF2FA',
headerRight: () => (
<TouchableOpacity
onPress={() => {
console.log();
}}>
<Icon name="check" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="align-justify" style={styles.iconstyle} size={25} />
</TouchableOpacity>
),
})}
/>
</StackUserProduct.Navigator>
);
};
const ShopNavigator = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Products">
<Drawer.Screen name="Products" component={stacknavigator} />
<Drawer.Screen name="Order" component={stacknavigatorOrder} />
<Drawer.Screen name="Admin" component={stacknavigatorUserProduct} />
</Drawer.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
iconstyle: {
margin: 15,
color: '#EBF2FA',
},
});
export default ShopNavigator;

Why is react-native-material-dropdown so slow in the way I use it to edit and add majors?

My app drop-downs are pretty slow. It especially takes a long time if i go into the Settings Screen and try to change my major. Or anything dealing with adding or editing a major in this specific screen. I really need to make adding or editing a major much faster. I am not sure the reason why editing or adding a major is taking too long. And I am not sure about how to go at making adding and editing a major much faster. So I am posting the entire component and I am commenting parts that deal with adding or editing a major. I am using react-native-material-dropdown.
Here is the entire component code:
import React from 'react';
import PropTypes from 'prop-types';
import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import { compose, withStateHandlers } from 'recompose';
import { Dropdown } from 'react-native-material-dropdown';
import { Icon } from 'react-native-material-ui';
import R from 'ramda';
import { ConnectivityRenderer } from 'react-native-offline';
import NetworkConnectivity from '../error/NetworkConnectivity';
import { toArray } from '../selectors';
import { Container, Switch, SwitchOption } from './common';
import { editStudent } from '../actions';
const propTypes = {
toolbar: PropTypes.elem,
loading: PropTypes.bool,
university: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
}),
universities: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
})
),
degrees: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
})
),
studentDegrees: PropTypes.arrayOf(
PropTypes.shape({
index: PropTypes.number,
track: PropTypes.string,
})
),
errors: PropTypes.shape({
university: PropTypes.string,
degree: PropTypes.string,
}),
year: PropTypes.string,
onUniversityChange: PropTypes.func,
onTermChange: PropTypes.func,
onDegreeChange: PropTypes.func,
onYearChange: PropTypes.func,
onTrackChange: PropTypes.func,
onAddDegree: PropTypes.func,
onDone: PropTypes.func,
};
const contextTypes = {
uiTheme: PropTypes.object.isRequired,
};
const validate = state => {
const result = {};
if (!state.university.id) {
result.university = 'You should select an university';
}
return result;
};
const enhance = compose(
connect(
({ user, universities, degrees }) => ({
studentId: user.id,
user,
universities: toArray(universities),
degrees: toArray(degrees),
}),
{ editStudent }
),
withStateHandlers(
props => {
return {
university: props.user.university || {},
year: props.user.academicClass || 'freshman',
studentDegrees: R.isEmpty(props.degrees)
? []
: R.isEmpty(props.user.studentDegrees)
? [{ degree_id: props.degrees[0].id, track: 'Major' }]
: R.values(props.user.studentDegrees),
errors: {},
};
},
{
onUniversityChange: () => (value, index, data) => ({
university: data[index],
}),
onYearChange: () => year => ({ year }),
onTrackChange: state => ({ idx, track }) => ({
studentDegrees: R.update(
idx,
R.assoc('track', track, state.studentDegrees[idx]),
state.studentDegrees
),
}),
// Fucntion dealing with degree change
onDegreeChange: (state, props) => ({ idx, index }) => ({
studentDegrees: R.update(
idx,
R.assoc(
'degree_id',
props.degrees[index].id,
state.studentDegrees[idx]
),
state.studentDegrees
),
}),
// Function dealing with degree adding
onAddDegree: (state, props) => () => ({
studentDegrees: R.append(
{
degree_id: props.degrees[0].id,
track: 'Major',
},
state.studentDegrees
),
}),
onRemoveDegree: state => idx => ({
studentDegrees: [
...state.studentDegrees.slice(0, idx),
...state.studentDegrees.slice(idx + 1),
],
}),
// When the user is done with settings.
// This function communicates with the back end to save things in the remote database
onDone: (state, { studentId, editStudent }) => () => {
const errors = validate(state);
if (Object.keys(errors).length !== 0) {
return { errors };
}
editStudent(
studentId,
state.year,
state.university.id,
state.studentDegrees
);
},
}
)
);
// The Settings Component
const FormUserSettings = (props, context) => {
const styles = getStyles(props, context);
return (
<ConnectivityRenderer>
{isConnected => (
isConnected ? (
<Container>
{React.cloneElement(props.toolbar, {
onRightElementPress: props.onDone,
})}
<ScrollView style={styles.container}>
<Text
style={[
styles.title,
props.errors.university ? styles.titleError : {},
]}
>
University
</Text>
// Selecting a university
<Dropdown
label="Select university..."
data={props.universities.map(u => ({ id: u.id, value: u.name }))}
onChangeText={props.onUniversityChange}
value={props.university.name}
/>
{props.errors.university &&
<Text style={styles.errorMessage}>
{props.errors.university}
</Text>}
<View style={{ height: 16 }} />
<Text style={styles.title}>Current Year</Text>
<View style={{ height: 8 }} />
<Switch
value={props.year}
onChange={props.onYearChange}
selectedColor={styles.switchSelectedColor}
unselectedColor={styles.switchUnselectedColor}
>
<SwitchOption text="Freshman" value="freshman" />
<SwitchOption text="Sophomore" value="sophomore" />
<SwitchOption text="Junior" value="junior" />
<SwitchOption text="Senior" value="senior" />
</Switch>
<View style={{ height: 16 }} />
<Text
style={[styles.title, props.errors.degree ? styles.titleError : {}]}
>
Major / Minors
</Text>
{!R.isEmpty(props.degrees) &&
props.studentDegrees.map((sd, idx) => {
const degree = R.find(R.propEq('id', sd.degree_id), props.degrees);
return (
<View
key={`sd-${idx}`}
style={{ flex: 1, height: 96, marginTop: 24 }}
>
<View
style={{
flex: 1,
flexDirection: 'row',
alignItems: 'flex-end',
}}
>
<View style={{ flex: 1 }}>
<Dropdown
style={{ flex: 1 }}
label="Select degree..."
data={props.degrees.map(d => ({
id: d.id,
value: d.name,
}))}
onChangeText={(value, index) =>
props.onDegreeChange({ idx, index })}
value={degree ? degree.name : ''}
/>
</View>
{props.studentDegrees.length !== 1 &&
<TouchableOpacity
style={{ marginBottom: 8, paddingLeft: 24 }}
onPress={() => props.onRemoveDegree(idx)}
>
<Icon name="delete" size={24} />
</TouchableOpacity>}
</View>
<Switch
value={sd.track}
onChange={track => props.onTrackChange({ idx, track })}
selectedColor={styles.switchSelectedColor}
unselectedColor={styles.switchUnselectedColor}
>
<SwitchOption text="Major" value="Major" />
<SwitchOption text="Minor" value="Minor" />
<SwitchOption text="Certificate" value="Cert" />
</Switch>
</View>
);
})}
<TouchableOpacity style={{ padding: 10 }} onPress={props.onAddDegree}>
<Text style={styles.addDegreeText}>+ Degree</Text>
</TouchableOpacity>
</ScrollView>
</Container>
) : (
<Container>
{React.cloneElement(props.toolbar, {
onRightElementPress: props.onDone,
})}
<NetworkConnectivity />
<ScrollView style={styles.container}>
<Text
style={[
styles.titleDisabled,
props.errors.university ? styles.titleError : {},
]}
>
University
</Text>
<Dropdown
label=""
data={props.universities.map(u => ({ id: u.id, value: u.name }))}
onChangeText={props.onUniversityChange}
value={props.university.name}
disabled={true}
editable={false}
/>
{props.errors.university &&
<Text style={styles.errorMessage}>
{props.errors.university}
</Text>}
<View style={{ height: 16 }} />
<Text style={styles.titleDisabled}>Current Year</Text>
<View style={{ height: 8 }} />
<Switch
value={props.year}
onChange={props.onYearChange}
selectedColor={styles.disabledSwitchSelectedColor}
unselectedColor={styles.switchUnselectedColor}
>
<SwitchOption text="Freshman" value="freshman" />
<SwitchOption text="Sophomore" value="sophomore" />
<SwitchOption text="Junior" value="junior" />
<SwitchOption text="Senior" value="senior" />
</Switch>
<View style={{ height: 16 }} />
<Text
style={[styles.titleDisabled, props.errors.degree ? styles.titleError : {}]}
>
Major / Minors
</Text>
// The problem of slowness starts here
// I feel like something here should be improved
{!R.isEmpty(props.degrees) &&
props.studentDegrees.map((sd, idx) => {
const degree = R.find(R.propEq('id', sd.degree_id), props.degrees);
return (
<View
key={`sd-${idx}`}
style={{ flex: 1, height: 96, marginTop: 24 }}
>
<View
style={{
flex: 1,
flexDirection: 'row',
alignItems: 'flex-end',
}}
>
<View style={{ flex: 1 }}>
<Dropdown
style={{ flex: 1 }}
label="Select degree..."
data={props.degrees.map(d => ({
id: d.id,
value: d.name,
}))}
disabled={true}
editable={false}
onChangeText={(value, index) =>
props.onDegreeChange({ idx, index })}
value={degree ? degree.name : ''}
/>
</View>
</View>
<Switch
value={sd.track}
onChange={track => props.onTrackChange({ idx, track })}
selectedColor={styles.disabledSwitchSelectedColor}
unselectedColor={styles.switchUnselectedColor}
>
<SwitchOption text="Major" value="Major" />
<SwitchOption text="Minor" value="Minor" />
<SwitchOption text="Certificate" value="Cert" />
</Switch>
</View>
);
})}
<TouchableOpacity disabled={true} style={{ padding: 10 }} onPress={props.onAddDegree} disabled={true}>
<Text style={styles.addDegreeTextDisabled}>+ Degree</Text>
</TouchableOpacity>
</ScrollView>
</Container>
)
)}
</ConnectivityRenderer>
);
};
FormUserSettings.contextTypes = contextTypes;
FormUserSettings.propTypes = propTypes;
export default enhance(FormUserSettings);

Resources