I keep getting this error when i try using breakpoints, and it just happens when i add .down after breakpoints
i tried to wrap the component in a ThemeProvider but still get the same error
const useStyles = makeStyles((theme) => ({
container: {
display: 'flex',
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
alignItems: 'center',
},
},
sidebar: {
width: '30%',
[theme.breakpoints('md')]: {
width: '100%',
},
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: 25,
borderRight: '2px solid grey',
},
heading: {
fontWeight: 'bold',
marginBottom: 20,
fontFamily: 'Montserrat',
},
}))
Related
I can't believe that I'm asking an obvious question, but I still get the error in console log.
Console says that it can't find the module in the directory, but I've checked at least 10 times for typos. Anyways, here's the component code.
I want to render MainTemplate in root
import React from 'react';
import MainTemplate from './components/MainTemplate';
const App = () => {
return (
<MainTemplate></MainTemplate>
);
}
export default App;
This is the MainTemplate component
import React from 'react';
import Categories from './components/Categories';
const Maintemplate = () => {
const MainTemplate = {
display: 'flex',
};
const HeaderTemplate = {
backgroundColor: '#0bb286',
color: '#fff',
fontSize: '32px',
padding: '20px',
width: '100%',
};
const CrawlTemplate = {
backgroundColor: '#eeeeee',
width: '750px',
height: '1050px',
margin: '80px',
padding: '40px',
fontSize: '30px',
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'space-between',
flex: '1',
marginTop: '60px',
};
const TutoringTemplate = {
backgroundColor: '#eeeeee',
width: '750px',
height: '1050px',
margin: '80px',
padding: '40px',
fontSize: '30px',
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
flex: '1',
marginTop: '60px',
};
const GroupStudyTemplate = {
backgroundColor: '#eeeeee',
width: '750px',
height: '1050px',
margin: '80px',
padding: '40px',
fontSize: '30px',
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
flex: '1',
marginTop: '60px',
};
const footerTemplate = {
backgroundColor: '#0bb286',
color: '#fff',
fontSize: '32px',
textAlign : "center",
padding: '20px',
width: '100%',
}
return (
<div>
<div className="HeaderTemplate" style={HeaderTemplate}>
튜터링/학습공동체 및 비교과활동 모음 사이트
</div>
<div className="MainTemplate" style={MainTemplate}>
<div className="CrawlTemplate" style={CrawlTemplate}>
<Categories/>
</div>
<div className="TutoringTemplate" style={TutoringTemplate}>
튜터링 활동신청 part
</div>
<div className="GroupStudyTemplate" style={GroupStudyTemplate}>
학습공동체 활동신청 part
</div>
</div>
<div className="footerTemplate" style={footerTemplate}>
박종준 #copy & right
</div>
</div>
);
};
export default Maintemplate;
This is the Categories component
import React from 'react';
import styled from 'styled-components';
const categories = [
{
name: 'All',
text: '전체'
},
{
name: 'Bachelor',
text: '학사'
},
{
name: 'Scholarship',
text: '장학'
},
{
name: 'Learning/Counseling',
text: '학습/상담'
},
{
name: 'Getjob',
text: '취창업'
}
];
const CategoriesBlock = styled.div`
display: "flex",
padding: "10px",
flexDirection : "row",
margin: "0 auto"
`;
const Category = styled.div`
fontSize : "16px",
cursor : "pointer",
textDecoration: 'none'
& : hover = {
color : #0bb286;
}
& + & {
margin-left : 10px;
}
`;
const Categories = () => {
return (
<CategoriesBlock>
{categories.map(c => (
<Category key={c.name}>{c.text}</Category>
))}
</CategoriesBlock>
);
}
export default Categories;
I've checked at least 10 times that the module is at this location ./src/components/MainTemplate.
Yet, React still throws this error:
./src/components/MainTemplate.js
Module not found: Can't resolve './components/Categories' in '/workspace/web_platform_test/myapp/src/components'
if your MainTemplate.js is located at ./src/components/MainTemplate.js, and your Categories.js is located at ./src/components/Categories.js
Then your import statement should be: import Categories from './Categories';
Looks like you're importing from ./src/components' so update the import to import Categories from './Categories', i.e. remove components from your import.
<ScrollView contentContainerStyle={styles.list}>
{pastGuesses.map((guess, index) => renderListItem(guess, pastGuesses.length - index))}
</ScrollView>
listContainer: {
flex: 1,
width: '80%'
},
list: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'flex-end'
},
listItem: {
borderColor: "#ccc",
borderWidth: 1,
padding: 15,
marginVertical: 10,
backgroundColor: "#fff",
flexDirection: 'row',
justifyContent: 'space-around',
width: "60%"
}
Here i am using ScrollView in react native.
Here is my code shered. But, unfortunately the scroll is not working.
I am not getting any error but scorll is not happening.
Please take a look
Im using react native and hooks with the library react-native-image-crop-picker to make a view where i choose from taking a photo with my camera or open my cellphone gallery and chose any image i want, once i have a picture it should show the image in a list, so if i choose more than one picture it should show more than oneimage in the list.
so far this code can open the gallery and it can take photos, the console log shows that it takes the image, but i canot render the image in the list, can i have some help?
import ImagePicker from 'react-native-image-crop-picker';
const Seleccion = ({navigation}) => {
const [fileList, setFileList] = useState([]);
const state = useMemo(() => ({ fileList }), [fileList]);
const onSelectedImage = useCallback((image) => {
setFileList(fileList => {
const newDataImg = [...fileList];
const source = { uri: image.path };
const item = {
id: Date.now(),
url: source,
content: image.data
};
newDataImg.push(item);
return newDataImg;
});
}, [setFileList]);
const takePhotoFromCamera = useCallback(() => {
ImagePicker.openCamera({
width: 300,
height: 400,
}).then(image => {
onSelectedImage(image);
console.log(image);
});
}, [onSelectedImage]);
const choosePhotoFromLibrary = useCallback(() => {
ImagePicker.openPicker({
width: 300,
height: 400,
}).then(image => {
onSelectedImage(image);
console.log(image);
});
}, [onSelectedImage]);
const renderItem = useCallback(({ item, index }) => {
return (
<View>
<Image source={item.url} style={styles.itemImage} />
</View>
);
}, []);
return (
<View style={styles.container}>
<FlatList
data={fileList}
keyExtractor={(item, index) => index.toString()}
renderItem={renderItem}
extraData={state}
/>
<TouchableOpacity style={styles.viewData} onPress={takePhotoFromCamera}>
<Text>Foto</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.viewData} onPress={choosePhotoFromLibrary}>
<Text>galeria</Text>
</TouchableOpacity>
</View>
);
}
const resizeMode = 'center';
Seleccion.navigationOptions = {
headerShown: false,
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#333333',
},
container2: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
textContainer: {
flexDirection: 'column',
marginTop: 30,
marginBottom: 10,
},
textIniciar: {
color: 'white',
width: 300,
fontSize: 25,
fontWeight: 'bold',
textAlign: 'center',
},
back: {
marginTop: 30,
marginLeft: 20,
flexDirection: 'column',
color: 'white',
},
textInit: {
marginTop: 30,
color: '#b3b4b5',
textAlign: 'center',
},
buttonContainer: {
marginTop: 100,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
viewData: {
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
width: 260,
borderRadius: 30,
height: 45,
backgroundColor: '#D32345',
},
logout: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,
width: 260,
borderRadius: 30,
height: 45,
backgroundColor: '#911830',
},
loginText: {
color: 'white',
fontWeight: 'bold',
},
});
The problem is that you didn't defined the itemImage object in your styles. add this to your styles object and it should work
itemImage: {
height: 200,
width: 200
}
Using react-native, I created a custom button as follows:
import React, {Component, Fragment} from 'react';
import globalStyles from './../../globals/styles'
import {
Text,
View,
TouchableOpacity,
StyleSheet
} from 'react-native';
export default class MyButton extends Component {
render() {
return (
<TouchableOpacity style={styles.opacitySurface} onPress={this.props.customAction}>
<View style={styles.textContainer}>
<Text style={styles.text}>{this.props.buttonText}</Text>
</View>
</TouchableOpacity>
)
}
}
let buttonFontSize = 10;
const styles = StyleSheet.create({
textContainer: {
justifyContent: 'center',
alignItems: 'center',
},
opacitySurface: {
backgroundColor: globalStyles.colors.customerGreen,
width: "25%",
height: 60,
padding: 10,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.8,
shadowRadius: 1.5
},
text: {
textAlign: 'center',
fontFamily: globalStyles.fonts.OpenSans,
color: 'white',
fontSize: buttonFontSize,
}
}
);
But the text inside this button doesn't align vertically. Premise: I am new in react-native and I am almost sure I missing something of really stupid.
For the properties justifyContent and alignItems to work they need to be on an element with display: flex.
Whats making your text align to center is the property textAlign: 'center'
on style.text
Use display: 'flex' and flex: 1 on your style.textContainer
textContainer: {
display: 'flex'
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
add css to your opacitySurface
display: "flex",
justifyContent: "center",
alignItems: "center"
it will make your text in center
Add flex: 1 in your textContainer style :
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
I am working with Picker native-base to React Native. I wanna style picker like the picture I post with both Android and iOS. But I don't know how to style like this.
Install an npm library
https://www.npmjs.com/package/react-native-smooth-picker
npm i react-native-smooth-picker
You can also check from the git repository
https://github.com/rdhox/react-native-smooth-picker
Declare constant globally
import SmoothPicker from "react-native-smooth-picker";
const Bubble = props => {
const { children, selected, horizontal } = props;
return (
<View
style={[
horizontal ? styles.itemStyleHorizontal : styles.itemStyleVertical,
selected &&
(horizontal
? styles.itemSelectedStyleHorizontal
: styles.itemSelectedStyleVertical)
]}
>
<Text
style={{
textAlign: "center",
fontSize: selected ? 20 : 17,
color: selected ? "#006E4F" : "#006E4F",
fontWeight: selected ? "bold" : "normal",
}}
>
{children}
</Text>
</View>
);
};
Add inside render()
<SmoothPicker
initialScrollToIndex={selected}
onScrollToIndexFailed={() => {}}
keyExtractor={(_, index) => index.toString()}
showsVerticalScrollIndicator={false}
bounces={true}
offsetSelection={40}
scrollAnimation
data={Array.from({ length: 15 }, (_, i) => 0 + i)}
onSelected={({ item, index }) => this.handleChange(index)}
renderItem={({ item, index }) => (
<Bubble selected={index === selected}>{item}</Bubble>
)}
/>
Check sample project for style, you need to little modified.
const styles = StyleSheet.create({
container: {
paddingTop: 60,
paddingBottom: 30,
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
wrapperHorizontal: {
width: 300,
height: 50,
justifyContent: "center",
alignItems: "center",
margin: "auto",
color: "black",
marginBottom: 80
},
wrapperVertical: {
width: 100,
height: 300,
justifyContent: "center",
alignItems: "center",
margin: "auto",
color: "black"
},
itemStyleVertical: {
justifyContent: "center",
alignItems: "center",
width: 50,
height: 50,
paddingTop: 0,
borderWidth: 1,
borderColor: "grey",
borderRadius: 0,
backgroundColor: "#D9F5ED"
},
itemSelectedStyleVertical: {
paddingTop: 0,
borderWidth: 2,
borderColor: "#DAA520",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#D9F5ED"
},
itemStyleHorizontal: {
justifyContent: "center",
alignItems: "center",
width: 50,
height: 50,
paddingTop: 0,
borderWidth: 1,
borderColor: "grey",
borderRadius: 0,
backgroundColor: "#D9F5ED"
},
itemSelectedStyleHorizontal: {
paddingTop: 0,
borderWidth: 2,
borderColor: "#DAA520",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#D9F5ED"
}
});