Full error from yarn ios display
UPDATE: I have solved the error, by commenting out the whole Ionicon part. Now I have a memory leak error and now no image for search, but this question is answered!
I'm trying to create a search bar that will show you the results after you search(a list of profiles), like Instagram. I'm getting this error, and I have made sure the index files export the Discover. The problem occurs when I try to click on the discover tab of the tab bar and it tries running this code. I use a 'SearchStore' because I had trouble using the setSearch & useState because of a hook error(which I fixed), and this is the solution I arrived at, it uses mobx to inject the data. I can't fix this render problem, it seems everything I try just leads to other errors.
I would really appreciate any help, as I'm new to javascript/react native and this is killing me. If you need any other code snippets like the routes file or tab bar code, and I'll provide it, let me know.
This is the Discover.tsx
import React, { useState } from 'react'; import Ionicons from 'react-native-vector-icons';import { Container, Search, Header, Input } from './styles';import { TypedComponent } from '../../Components';import { SearchStore } from '../../Stores/Search';import { hoc } from '../../Modules';//export const Discover: React.FC = () => {@hoc("search")export class Discover extends TypedComponent<{search?: SearchStore;}> { render() { const { search, lang } = this.props; //const { search } = this.props; const str = lang.str.search; //const [search, setSearch] = useState(''); return (<Container><Header><Search><Ionicons name="search1" style={{ paddingRight: 10, }} size={18} color="#838383" /><Input placeholder="Search" //value={search} value={search.editingSearch} returnKeyType="search" onChangeText={search.onSearchEdit} //onChangeText={text => setSearch(text)} /></Search></Header></Container> ); }}export default Discover;This is the style.ts that discover uses:
import { getStatusBarHeight } from 'react-native-status-bar-height';import styled from 'styled-components/native';export const Container = styled.View.attrs({ paddingTop: getStatusBarHeight(),})` flex: 1; background: #fff;`;export const Header = styled.View` margin: 10px; margin-right: 15px; flex-direction: row; align-items: center;`;export const Search = styled.View` flex: 1; border-radius: 5px; align-items: center; padding: 10px 15px; margin-right: 15px; background: #ececec; flex-direction: row;`;export const Input = styled.TextInput` flex: 1; font-size: 16px;`;