I'm building a tutorial app with react native. I designed it well but I have no idea how can I store it's data.
I think to Store in object like this...
Tutorial = [
{
Intro : {
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incid quis.."
},
content : {
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do sunt in culpa qui officia deserunt mollit anim id est laborum...
},
conclusion : {
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo...
}
}
]
But I don't think it's a good idea to achieve this.
I'm so curious about how most of offline programming app developed. Probably most of you know app like programming hub, mimo... Etc
So please mention me how I can achieve this in my react native app
For most smaller data you can use AsyncStorage from react-native, but there are more data then you can use Realm and SQLite these are libraries to store data on device.
https://www.npmjs.com/package/react-native-sqlite-storage
https://github.com/realm/realm-js
Related
This has been asked before, but I'm not able to comment on existing posts due to lacking reputation points so I am creating my own question.
I have a hard time understanding how to use the Trans component properly, as I find its documentation page to be a bit lacking and unclear.
I am trying to use nested bold or italicized text in my JSON strings. For context, I have translation file called "homepage.json" which I am keeping in my React app's public/locales/en/ subdirectory, using a format as follows:
{
"main": {
"paragraph-text": "Lorem ipsum dolor sit, <1>amet consectetur adipisicing elit</1>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus."
}
}
My Trans component looks like this:
<Trans i18nKey={"homepage.main.paragraph-text"}>
Lorem ipsum dolor sit, <em>amet consectetur adipisicing elit</em>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus.
</Trans>
When I try to create a French translation file for homepage.json, under public/locales/fr/ while using the exact same format as its English counterpart, when toggling between languages the library is not making use of the French text.
This answer seems to describe exactly what I want to achieve, and I have attempted to implement the outlined solution into my application, but my Trans component instance does not appear to be able to locate the i18nkey value I pass to it.
Solved the issue. The problem is that I wasn't passing in the namespace of my translation file correctly to the Trans component.
As per my example above, the correct way to use Trans would be:
const { t } = useTranslation('myNamespace')
<Trans t={t} i18nKey={"main.paragraph-text"}>
Lorem ipsum dolor sit, <em>amet consectetur adipisicing elit</em>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus.
</Trans>
Along with the correct usage in the JSON file:
{
"main": {
"paragraph-text": "Lorem ipsum dolor sit, <0>amet consectetur adipisicing elit</0>. Dolore ab modi autem veniam aperiam mollitia at assumenda sint repellat sunt quia recusandae laboriosam tempora, aliquam nemo in nostrum laudantium? Temporibus."
}
}
I am newbie in react native animations. I am using react native animated to move menu right and push all content to right without cutting text, but as you see it is not wrapping.
I have already tried these solutions:
Using flexShrink for the Text component
flex: 1 and flexWrap to the parent View element
but nothing has worked, could somebody give me some advice?
`<Animated.View style={boxValue.getLayout()}>
<Text style={{flexWrap: 'wrap'}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
dapibus massa eu quam porttitor, id suscipit felis volutpat. Duis
tempus turpis
</Text>
</Animated.View>`
What you are trying to do is entirely possible using the Animated API. You can wrap the text component in a Animated.View that is shifted to right using an Animated.Value combined with styling the text with flexWrap: 'wrap'. That seems to be what you were going for, but perhaps you are not updating the width of the text container? Here is a snack showing the general idea in action.
For example, let's say you have a component that you're going to reuse many times in your app.
So you set it up to receive different/unique texts, multiple h2s and multiple ps as props.
const Sets = ({ oneH, twoH, threeH, oneP, twoP, threeP }) => {
return (
<div className="sets">
<div>
<h3>{oneH}</h3>
<p>{oneP}</p>
</div>
<div>
<h3>{twoH}</h3>
<p>{twoP}</p>
</div>
<div>
<h3>{threeH}</h3>
<p>{threeP}</p>
</div>
</div>
);
};
And then you use it as such:
<Sets
oneH="Blue Skies"
twoH="Good Times"
threeH="Hotels, Etc."
oneP="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam voluptatibus."
twoP="Different lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam voluptatibus."
threeP="Unique lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam voluptatibus."
/>
Is there too much text in the usage of it and is it too clunky? Is there some better way?
Try breaking it up even more, and putting the text sets into a JS array.
To make the source text more readable:
const texts = [
{
h:"abc",
p:"123"
},
{
...
}
]
And then pass this into your Sets element:
<Sets texts={texts} />
And then in the Sets, iterate the texts:
const Sets = ({ texts }) => {
return (
<div className="sets">
{texts.map(({h,p}) => (
<div>
<h3>{h}</h3>
<p>{p}</p>
</div>
)
</div>
);
};
This allows you to edit the source texts really easily in one place; it can even be loaded dynamically from an external source.
The single texts prop makes it easier to pass it in as you can see.
And finally the iteration allows you to escape having to type every single prop!
I am working with a json feed about cars. Part of the text has [VIN:'vin_number_is_here']Car make model here[/VIN]. I am using this in an ng-repeat and would like to, unless there's a better way, use a filter to process the text and create a hyperlink to a custom function ending up with something like <a ng-click="modalViewCar('vin_number_is_here')">Car make model here</a>
I have the replacement of the [/VIN] done but am at a loss for how best to handle the opening "tag".**
Additionally when I have hardcoded a test string I have found that the link never works which I assume is something Angular is responsible for...
app.filter('linkToVIN', ['$sce', function($sce) {
return function(input) {
input = input.replace("[/VIN]","</a>");
**input = input.replace("[VIN='12345abcdef']","<a ng-click=\"modalViewCar('12345abcdef')\">");**
return $sce.trustAsHtml(input);
};
}]);
<div ng-repeat="car in cars">
<div class="col-sm-12" ng-bind-html="car.details | filter:search | linkToVIN"></div>
</div>
The VIN link is in the body of text. Sometimes multiple times. So each ng-repeat has a {{car.details}} which may, about 1 in 3 times, have at least one string with the [VIN] structure. What I'd really like to do is hot link those as they appear within the text as so far I have found a few outlier cases where there are references to other [VIN] numbers. E.g.
Lorem ipsum dolor sit amet, [VIN:'12345abcdef']consectetur[/VIN] adipiscing elit. Vivamus laoreet odio nisi, eget gravida nunc porta gravida. Pellentesque nec porta tortor. In neque mi,[VIN:'000hijk']pretium[/VIN] at mattis ut, consectetur eget felis. Etiam tortor lacus, varius quis augue sed, condimentum varius massa.
Which I would like to convert to.
Lorem ipsum dolor sit amet, < a ng-click="modalViewCar('12345abcdef')" >consectetur< /a > adipiscing elit. Vivamus laoreet odio nisi, eget gravida nunc porta gravida. Pellentesque nec porta tortor. In neque mi,< a ng-click="modalViewCar('000hijk')" >pretium< /a > at mattis ut, consectetur eget felis. Etiam tortor lacus, varius quis augue sed, condimentum varius massa.
solving the regexp
You can do this with one regexp using multiple matching groups to build your anchor tags:
data.replace(/\[VIN:'([\w\d-_]*)'\](.*?)\[\/VIN\]/gmi, '<a ng-click="vc.modalClick($1)">$2</a>')
test - https://regex101.com/r/tU5sG2/2
compiling the DOM
The next issue is that you need to compile the DOM correctly. In order to do that, I recommend a directive
.directive('vinContainer', function($parse, $compile){
restrict: 'A',
link: function($scope, elem, attrs){
regex = /\[VIN:'([\w\d-_]*)'\](.*?)\[\/VIN\]/gmi
anchor = '$2'
data = $parse(attrs.ngModel)($scope)
parsed = data.replace(regex, anchor)
elem.html(parsed).show()
$compile(elem.contents())($scope)
}
}
usage
<div vin-container ng-model="vc.viewData"/>
codepen - http://codepen.io/jusopi/pen/VeebEO?editors=101
This solution assumes that you are tightly coupling your directive to your view controller because your compiled anchors know which method to call. You could further break this down by:
creating an isolate scope with a callback expression you declare on the DOM
have the compiled links call the callback expression passing back the id as the payload
Doing it that way would be much more scalable. Here is the codepen for that version as well - http://codepen.io/jusopi/pen/yeeXJj?editors=101
Say your cars array looks something like this
var cars = [{details: "[VIN='12345abcdef']something[/VIN]"}, {details: ...}, ...];
You can transform it to a usable object by mapping the array
$scope.cars = cars.map(function(car) {
var parts = car.details.match(/^\[VIN='(.+?)'\](.+?)\[\/VIN\]$/);
return {
vin: parts[1],
details: parts[2]
};
});
and then in your template
<div ng-repeat="car in cars">
<a ng-click="modalViewCar(car.vin)" ng-bind-html="car.details"></a>
</div>
This makes the assumption that all your car.details entries match the regular expression.
Having a problem with returning results from one particular table in a database.
I have two tables:
a) repository_notes
b) repository_noteupdates (this one is giving the problem)
Here is an image showing there are some data in both tables using a simple select * query using Navicat.
http://imgur.com/GA6bn
However When I query repository_notes below:
print_r($this->db->get('repository_notes')->result_array());
It gives me the following result set:
Array
(
[0] => Array
(
[note_id] => 1
[note_title] => This is my note
[note_content] => Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet lobortis lacus, ac iaculis risus tristique nec. Curabitur porta gravida est, non tincidunt nunc porta nec. Nunc diam metus, feugiat non lobortis
[note_userId] => 2302
[note_pageno] => 12
[note_deleted] => 0
[note_bookid] => 12
)
[1] => Array
(
[note_id] => 2
[note_title] => This is my note
[note_content] => Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet lobortis lacus, ac iaculis risus tristique nec. Curabitur porta gravida est, non tincidunt nunc porta nec. Nunc diam metus, feugiat non lobortis
[note_userId] => 2302
[note_pageno] => 12
[note_deleted] => 0
[note_bookid] => 12
)
However when I run the query below:
print_r($this->db->get('repository_noteupdates')->result_array());
I get no results:
Array
(
)
Have any of you seen anything like this before and have a solution it would be appreciated.
So I found the solution for this.
It seems that if i remove the name update from the table name, it seems to work. So i have called the table repository_noteupdata instead of repository_noteupdates
and it is now working.
Thanks guys for helping out. It is strange because I cannot find any documentation in codeigniter saying update is a reserved word for a table name.